Cinematic Intro brings high end motion graphics and professional grade video reveals directly to your Framer projects. It’s designed to transform the first few seconds of a visitor's experience, providing a polished, high production feel to any landing page. Simply drop it into your hero section to showcase your brand with a smooth, physics based logo animation over your choice of background video.
The component renders a full screen or hero sized video background with a customizable color overlay for better text legibility. It handles complex logo animations using spring physics (stiffness, damping, and mass) for a natural, premium feel. It also manages a timed sequence where the logo appears first, followed by custom text, and finally a "Skip" button. An optional progress bar keeps users informed of the intro length, and the skip button ensures that returning visitors can get straight to your content.
Media & Animation: Upload your own logo and background video. Choose animation styles like the 3D Flip and set the exact width of your logo.
Physics & Feel: Fine tune the "bounce" of your animation by adjusting the Stiffness, Damping, and Mass sliders to get the movement just right.
Timing: Control the sequence of the reveal with independent delay sliders for the overall start, the secondary text, and the action button.
Visual Styling: Full control over the overlay color and opacity, text colors, and button styles. You can even use custom fonts for both the main text and the skip button to ensure it perfectly matches your brand guidelines.
Creative agency and studio portfolios
High-impact product launch pages
Luxury brand websites
Event and conference landing pages
Personal branding and "Coming Soon" teasers
If you build something awesome with this, I'd love to see it. Post your site on X and tag me @Dulajweb so I can check it out and share it!
Have questions or some feedback on how to make this better? Reach out anytime at dulajdilshan766@gmail.com or find me on X @Dulajweb.
Dulaj dilshan
