Star rise
A liquid-metal asterisk that rises into place, then turns as you scroll.
Behaviour
- Rises a full viewport height while turning from -180° to 0 (3.6s), fading in over the first half.
- Starts hidden in the server HTML, so nothing flashes; WebGL loads only on the client, and the plain SVG asterisk is the fallback.
- After the rise it keeps turning with its own scroll through the viewport (or container). The shader stops its frame loop while off screen.
- Put it inside an overflow-hidden section so the rise does not grow the page.
- Reduced motion: it only fades in, does not rise, spin or turn on scroll, and the metal holds still.
Props
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The mark. Defaults to the liquid-metal asterisk; pass any SVG or image to skip the shader. |
| size | numberdefault 320 | Width and height in pixels. The shader canvas is this size. |
| duration | numberdefault 3.6 | Seconds for the rise and half-turn. The fade takes half of it. |
| delay | numberdefault 0 | Seconds before it rises. |
| turns | numberdefault 3 | Full turns as the mark scrolls through the viewport. 0 turns it off. |
| container | RefObject<HTMLElement | null> | Follow a scrolling box instead of the page. |
| shader | booleandefault true | Default asterisk only: false draws the plain SVG in the text colour, no WebGL. |
| colorBack | stringdefault --background | Default asterisk only: the shader's background. The page background by default; set it when the mark sits on another surface. |
| colorTint | stringdefault text colour | Default asterisk only: the metal's tint; by default it follows the text colour, so it reads in light and dark themes. |
| onRiseComplete | () => void | Called once the mark has settled. |
Installation
npx shadcn@latest add https://purrfectui.com/r/star-rise.jsonHow to use
import { StarRise } from "@/components/ui/star-rise";
<section className="relative min-h-svh overflow-hidden">
<StarRise size={320} onRiseComplete={() => setReady(true)} />
</section>Source code
Loading…
Credits
Ported from mapinly.vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.