StickyLetterScatter
A high-end, performance-optimized hero component featuring immersive 3D text scattering, dynamic Gaussian blur and smooth image scaling.
Make it with Workshop
Build your own component with AI
A high-end, performance-optimized hero component featuring immersive 3D text scattering, dynamic Gaussian blur and smooth image scaling.
Make it with Workshop
Build your own component with AI
Elevate your digital storytelling with the Cinematic 3D Letter Scatter component. Designed for creators who want to make a lasting first impression, this component transforms standard text into a living, breathing 3D environment. As users scroll, individual characters fly through 3D space, emerging from a cinematic blur to form perfectly aligned, readable headlines.
Fluid 3D Interpolation: Characters move across the X, Y, and Z axes, creating a deep "fly-through" effect that reacts instantly to scroll direction.
Cinematic Depth of Field: Integrated dynamic Gaussian blur that softens "distant" letters and sharpens them as they converge, mimicking high-end cinematography.
Fully Customizable: Control everything from the Framer sidebar—change fonts (Google & Project fonts), adjust scatter intensity, modify image scaling, and tweak colors.
Responsive & Smooth: Features built-in momentum physics to eliminate "scroll hitching," ensuring a premium feel across all breakpoints.
Creative Directors & Developers: Showcasing a blend of technical skill and design aesthetic.
Luxury Portfolios: Creating a sophisticated, "quiet luxury" entrance for high-end photography or design work.
Landing Pages: Engaging users immediately with an interactive hero section that rewards exploration.
Drop the component onto your canvas.
Upload your portrait image and set your background color to match.
Use the Font Picker to select your brand’s typography.
Adjust the Scroll Depth to control how long the animation lasts.
