Starwipe.fun - A CSS View Transitions Demo
I built starwipe.fun as a playful demo of the CSS View Transitions API.
When I first heard about View Transitions, making a star wipe was the first thing that came to mind. I've looked around and couldn't find anyone who had done it, so I decided to make it myself.

The Tech
The magic happens with the CSS View Transitions API, which allows you to create smooth transitions between different states of a web page. No Javascript required!
/* Enable view transitions for navigation */
@view-transition {
navigation: auto;
}
/* Style the old page during transition */
::view-transition-old(root) {
animation: star-wipe-out 0.9s ease-in-out;
}
/* Style the new page during transition */
::view-transition-new(root) {
animation: star-wipe-in 0.9s ease-in-out;
}
/* Required to keep old page visible during transition */
@keyframes star-wipe-out {
}
/* The star wipe animation - expands from center point to full star */
@keyframes star-wipe-in {
from {
/* Start with a single point at the center */
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
to {
/* Expand to a full 10-pointed star shape */
clip-path: polygon(calc(50vmin + 50vw - 50vmin) -300vmin, calc(188vmin + 50vw - 50vmin) -24vmin, calc(484vmin + 50vw - 50vmin) -24vmin, calc(244vmin + 50vw - 50vmin) 152vmin, calc(332vmin + 50vw - 50vmin) 424vmin, calc(50vmin + 50vw - 50vmin) 256vmin, calc(-232vmin + 50vw - 50vmin) 424vmin, calc(-144vmin + 50vw - 50vmin) 152vmin, calc(-384vmin + 50vw - 50vmin) -24vmin, calc(-88vmin + 50vw - 50vmin) -24vmin);
}
}
Here's what each part does:
@view-transition { navigation: auto; }
- Enables automatic view transitions for navigation events::view-transition-old(root)
- Styles the old page during the transition::view-transition-new(root)
- Styles the new page during the transitionstar-wipe-out
- Empty animation to keep the old page visiblestar-wipe-in
- The main animation that expands a center point into a full star shape usingclip-path
The star shape is created using CSS clip-path
with a polygon that forms a 10-pointed star pattern.
Why?
Why not? Sometimes the best demos are the ones that make you smile.
Check it out: starwipe.fun