search

Gauravdarkslayer / ngx-stories

An Angular component to render instagram like stories.
https://ngx-stories.vercel.app
MIT License
17 stars 13 forks source link

💡 [REQUEST] - Add backlit effect for landscape stories #54

Open Gauravdarkslayer opened 1 month ago

Gauravdarkslayer commented 1 month ago

Start Date

No response

Implementation PR

No response

Reference Issues

No response

Summary

This effect would enhance the visual appeal by adding a soft, colored background behind the story content, creating a subtle spotlight effect that draws attention to the story in focus.

Use Case: In scenarios where stories are presented in landscape mode, the backlit effect would provide a more immersive and dynamic experience. It can enhance user engagement. This feature could also serve to improve the contrast and visibility of the story content, ensuring it stands out against various backgrounds.

Effect Trigger: The backlit effect should be automatically applied when the story's orientation is detected as landscape (i.e., wider than it is tall). Customization Options (optional): It would be useful to allow users to adjust the intensity and color of the backlit effect via customizable properties (e.g., backlitIntensity, backlitColor). Performance Consideration: Ensure the effect doesn't introduce any significant performance overhead, particularly for mobile devices. Fallback: In cases where the effect may not be supported (e.g., older browsers or devices), provide a graceful fallback where the effect is disabled without breaking the story display.

Basic Example

In landscape instagram stories you can see gradient color on top and bottom of the story. Similarly in youtube ambient mode.

Drawbacks

There might be some performance bottlenecks which needs to be taken care of. In case of videos based story we can ignore this implementation

github-actions[bot] commented 1 month ago

Hey @Gauravdarkslayer, Thanks for contributing and Congrats on opening Issue :tada:

We will try to review as soon as possible and a maintainer will get back to you soon!

PRIME-SV commented 1 month ago

Hi @Gauravdarkslayer, I would like to work on this REQUEST. if possible assign this to me.

Gauravdarkslayer commented 1 month ago

Sure @PRIME-SV , done

Gauravdarkslayer commented 1 month ago

This issue also relates to another issue which is https://github.com/Gauravdarkslayer/ngx-stories/issues/16 Where we need to align the landscape based stories vertically center

PRIME-SV commented 1 month ago

Sure. Will try and address that too.