Make your headlines unforgettable with the Expanding Typography component. This powerful Framer component takes standard text and applies a cinematic, fluid expansion animation. The letters start tightly condensed (or blurred) and smoothly expand outward to reveal your message.
It is the perfect choice for hero sections, movie-style title reveals, and interactive portfolios. Built with Framer Motion, it offers precise control over every detail. You can choose where the text expands from (Left, Center, Right), how it is triggered (on Scroll, Hover, Click, or Page Load), and fine-tune the initial density and blur effects. It fully supports custom fonts, text shadows, and stroke outlines to match your brand perfectly.
Functions (Key Features):
🎥 Cinematic Expansion: Text smoothly animates from a condensed (Initial Density) state to its target letter spacing.
🎬 Motion Blur: Optional built-in blur effect that fades out as the text expands, mimicking a camera focusing.
⚡ Multiple Triggers: Animate the text on Scroll (in-view), Load, Hover, or Click.
↔️ Directional Control: Choose whether the text expands from the Left, Center, or Right.
🎨 Advanced Styling: Full support for custom fonts, text colors, stroke (outline) widths, and drop shadows.
How to Use:
Insert: Drag the Expanding Typography component onto your Framer canvas.
Content: Type your desired headline in the Text property.
Typography: Use the Font controls to set the final size and letter-spacing (how wide it will eventually become).
Animation Setup: Set the Initial Density (a negative value like -0.15em works best) to determine how tightly packed the letters start.
Interaction: Choose a Trigger (e.g., "Scroll") and adjust the Duration and Delay to perfect the timing.
Alpheratz
