If you were browsing the web circa 1998, splash pages were everywhere. Flash-powered intros with dramatic music, spinning logos, and “Welcome to our website!” animations were a standard part of the design process. Those days are long gone, but they haven't vanished entirely. Brands still use splash pages for age verification, country and language selection, or simply to create a bold first impression.
Getting Started
To begin, I drew stars in Framer at different sizes and turned the frame into a component with a few variants. In each variant, one star was scaled up while another was scaled down. I then connected each variant with an On Appear interaction, which made them cycle automatically after a certain delay.
Creating Auto-Playing Animations
To create auto-playing animations, I applied the same technique used for the stars to create the shimmers. I created one fade that animates left to right and another that animates right to left. Then, I placed the shimmers inside the button, with one at the top and one in the bottom half. A purple fill placed on top covers most of them, leaving the animation visible just 2px above and below.
Adding More Details
Lastly, I added more stars using the famous particles component from @benjaminnathan, which can be grabbed from https://particles.page. The layer is set to display the ✦ character, and its layer simply goes to opacity 1 in the hover state. A circular gradient layer on top hides particles far away.
Step into the future of design
Join thousands using Framer to build high-performing websites fast.
