Counter Loader Hero

Customize

Card Images22 images
Ring Cards
10
Name
Monogram
Role
Count Time
2.8
Ring Spin
40
Cloud Size
100
Cloud Speed
50
Decode Text
Background
Card Color
Text Color
Font
Accent Font
Text Scale
100%
Loop Intro

Counter Loader Hero

Animations
220 views•5 uses

Props

17 properties
itemsstring[]22 images
The first cards form the loader ring; all of them form the cloud. PNG cut-outs sit on the card colour, photos fill their card.
ringCountnumber10
How many cards make up the loader ring.
namestringMotion Library
Name on the left of the loading screen.
monogramstringSpark UI
Short mark at the centre of the ring.
rolestringCrafted for the W…
Role on the right of the loading screen.
loadDurationnumber2.8
How long the counter takes to reach 100.
ringSpinnumber40
How far the ring turns while loading.
cloudSizenumber100
Size of the 3D cloud.
cloudSpeednumber50
How fast the cloud turns on its own.
scramblebooleantrue
Decode the name and role letter by letter instead of fading them in.
backgroundcolor#ffffff
Colour behind everything.
cardColorcolor#f1f1f0
Fill behind cut-out pictures.
textColorcolor#141414
Colour of all text.
fontFamilystringvar(--font-host-g…
Main typeface.
accentFontstringvar(--font-instru…
Typeface for the role.
textScalenumber100
Relative size of the text.
autoPlaybooleanfalse
Replay the whole intro a few seconds after the cloud forms.

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add counter-loader-hero

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A site intro that becomes the hero: while a counter climbs to 100, cards pop in around a turning ring that circles a centre monogram. At 100 the ring draws in to a single stack, then every card bursts out into a slowly rotating 3D cloud of pictures you can lean and drag.

KEY FEATURES

  • ·A zero-padded counter climbs to 100 on an ease-in-out curve while the name and role decode letter by letter
  • ·Ring cards pop in one by one as the ring turns, each counter-rotating so its picture stays upright
  • ·At 100 the text lifts out of clipping masks and the ring draws in until the cards stack at the centre
  • ·The stack bursts into a 3D sphere of cards spread on a Fibonacci lattice, with perspective scale, depth ordering and depth fade
  • ·The cloud turns on its own, leans toward the pointer and spins with momentum when dragged
  • ·A timeline runs the intro and a single render loop owns the cloud, so the two never write the same transforms