Motion
Motion components: compare
Every Motion component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.
Compare
| Component | Theme | Parts | Custom props | Access |
|---|---|---|---|---|
| Bead Ring | Dark only | 1 | 6 | Licensed |
| Ember Orbit | Dark only | 1 | 3 | Licensed |
| Fish Orb Bowl | Light and dark | 1 | 4 | Licensed |
| Fish Orb Rim | Light and dark | 1 | 5 | Licensed |
| Fish School | Light and dark | 1 | 5 | Licensed |
| Orbit Items | Light and dark | 1 | 4 | Licensed |
| Orbit Rings | Light and dark | 2 | 7 | Licensed |
| Pointer Parallax | Dark only | 2 | 3 | Licensed |
All Motion components
8 components, A to Z.
Bead RingLicensedA hairline ring in one color with a lit bead riding its track. Only the ring turns, so rings nest and an orb can sit still in the centre; rotation stops under reduced motion.
Ember OrbitLicensedA transparent warm arc that fades along a thin circular track, with a blurred bloom behind it. Rotation is opt-in and pauses under reduced motion; the backdrop and grain are left to the consumer.
Fish Orb BowlLicensedA circular window onto the sunlit Fish School scene, where each fish orbits on its own CSS motion path among rising bubbles. Seed, fish count and bubble count vary the school; requires fish-school-light-scene.
Fish Orb RimLicensedA school of fish orbiting inside a Painted Orb Rim sphere over deep water, each on its own CSS motion path. The palette reskins the rim light and bubbles are off by default. Builds on Fish School.
Fish SchoolLicensedA transparent layer of a seeded, depth-layered fish school with rising bubbles, in light or dark inks. Swims across the viewport, its own box, or orbit loops; still under reduced motion.
Orbit ItemsLicensedA circular stage that carries any items around evenly spaced spokes while counter-rotating them to stay upright. Set size, seconds per turn and direction; stops under reduced motion.
Orbit RingsLicensedDecorative concentric SVG rings, each a faint circle with a fading quarter-arc that spins at its own speed and direction in currentColor. Static until motion is allowed; optional bottom fade.
Pointer ParallaxLicensedA pointer-driven parallax group where each Parallax Layer eases toward the cursor by its own depth and settles back on leave. Mouse and pen only; holds still under reduced motion.
Screenshot Plate
Screenshot mounted on a painted mat: a delft ColorWash ground with a ScreenshotFrame bleeding the shot off the bottom. Pass a light and dark ScreenshotImage pair as children.
Bead Ring
A hairline ring in one color with a lit bead riding its track. Only the ring turns, so rings nest and an orb can sit still in the centre; rotation stops under reduced motion.