💡 [REQUEST] - Add backlit effect for landscape stories

[Gauravdarkslayer]

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

• Request 1: Add background color to image/video based story ( completed in [REQUEST] #54 : Added a hard coded backlit color for story images. #57 ).
• Request 2: Dynamic backlit color based on story's color just like instagram.

[github-actions]

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

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

[PRIME-SV]

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

[Gauravdarkslayer]

Sure @PRIME-SV , done

[Gauravdarkslayer]

This issue also relates to another issue which is #16
Where we need to align the landscape based stories vertically center

[PRIME-SV]

Sure.
Will try and address that too.