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.
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.
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.
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.
Framer variables let you customize:
Eyebrows, context lines, headlines, and metadata
Button links
Shader settings including seeds
Core proportions and radii remain fixed to preserve the polished layout.
The component scales across desktop, tablet, and phone, with adjusted typography, spacing, and control sizing to maintain the same hierarchy across breakpoints.
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.
Reach out any time via x.com or email at contact@omermirza.com.
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.
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.
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.
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.
Framer variables let you customize:
Eyebrows, context lines, headlines, and metadata
Button links
Shader settings including seeds
Core proportions and radii remain fixed to preserve the polished layout.
The component scales across desktop, tablet, and phone, with adjusted typography, spacing, and control sizing to maintain the same hierarchy across breakpoints.
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.
Reach out any time via x.com or email at contact@omermirza.com.
Omer Mirza
