Skip to content

component

Shader Card Stories

By Omer Mirza

Details

Summary

Shader Card Stories is a premium Framer component for presenting changing content through animated shader backgrounds, timed progress, and smooth transitions.

Description

Get this component in the complete Shader Components Bundle. Access all four paid shader-driven Framer components—worth $39 separately—for $25 Get the Shader Components Bundle → Shader Card Stories is a premium Framer component for presenting changing content through animated shader backgrounds, timed progress, and smooth transitions. Each state combines an eyebrow, context line, headline, metadata, and action button inside one compact visual system. How It Works The component automatically cycles through three content states. As each progress segment fills, the text and shader background transition to the next story. The segmented loader indicates the active story and the remaining sequence. Visuals Each state uses the same liquid shader system with a unique palette and seed. The default blue, emerald, and crimson treatments create distinct moods while keeping the component visually consistent. The text, progress indicators, and shader background transition together, making the component feel like one continuous visual briefing rather than separate slides. Design and Motion The component uses balanced Inter typography, clear hierarchy, generous padding, compact metadata, soft corners, and restrained motion. Transitions remain smooth and direct, keeping the content readable while the animated shader adds depth and visual interest. Customization Framer variables let you customize: Eyebrows, context lines, headlines, and metadata Button links Core proportions and radii remain fixed to preserve the polished layout. Responsiveness The component scales across desktop, tablet, and phone, with adjusted typography, spacing, and control sizing to maintain the same hierarchy across breakpoints. Great For Shader Card Stories is perfect for product updates, news briefings, feature showcases, learning modules, project updates, event agendas, launch timelines, portfolio stories, and creative Framer websites. Questions & Support Reach out any time via x.com or email .

Introduction

Auto-playing Visual Slides

Rank history

Daily rank per list, from the first snapshot — lower is better.

1501100111148/148/228/309/79/15
  • All · #993