@gc registry
GalaxyCo Motion
Install any item with npx shadcn add @gc/<name>. Components read the site's own CSS variables and never know which brand they render.
Tokens
1 shipped
Durations, easings, travel and stagger. Every other item reads these.
- Motion tokensGalaxyCo motion tokens: durations, easings, the press spring, travel distances, stagger gaps, ambient loop rates and load-sequence offsets. Installs tokens.ts and merges the matching CSS vars into the site's stylesheet, plus the reduced-motion guard that drops server-rendered travel on [data-gc-motion] elements and server-rendered blur on [data-gc-motion="blur"] ones.
@gc/tokens
Primitives
8 shipped
Tier 1. Zero visual opinion. Client components on m.*.
- Motion providerRoot-layout provider: LazyMotion with domAnimation in strict mode, so every primitive renders m.* and the full motion bundle never ships. Honours the OS reduced-motion setting.
@gc/motion-provider - RevealScroll or load entrance for one element: opacity plus a travel token on --duration-slow and --ease-emphasized-enter, exit mirrored. Optional blur. Reduced motion crossfades.
@gc/reveal - StaggerCascades Stagger.Item children at a stagger token; seven or more reveal as a block. Reduced motion crossfades the group once.
@gc/stagger - Text revealSplit-text headline entrance by word or grapheme, aria-label on the wrapper and aria-hidden fragments. Reduced motion crossfades the whole string.
@gc/text-reveal - CounterCounts a number into place when it enters view, re-counts on a changed target with data-trend, tabular digits so nothing beside it shifts. Reduced motion shows the final value.
@gc/counter - MagneticPrimary CTA and nav icons lean toward a nearby pointer and spring home on spring.press. Fine pointers only; reduced motion renders the child still.
@gc/magnetic - ParallaxScroll-linked drift for media only, capped at 8% of the viewport, driven by useScroll and useTransform. Reduced motion renders the media still.
@gc/parallax - PresenceAnimatePresence for route and panel swaps: instant, crossfade or slide per brand.md, out fast before in smooth. Reduced motion crossfades.
@gc/presence
Effects
7 shipped
Tier 2. Ambient. One per viewport, never stacked.
- GrainFilm grain over one section: a greyscale noise tile that jumps between eight offsets every --duration-slow on the Web Animations API, pauses off-screen. Reduced motion holds the texture still.
@gc/grain - MarqueeLogo rail that moves one copy per cycle at a speed in pixels per second, measured live, linear, on the Web Animations API. Pauses off-screen and optionally on hover. Reduced motion stops it and lets it scroll by hand.
@gc/marquee - Shader backgroundPaper Shaders background in seven variants, painted with the site's own CSS variables. Flat box on --background server-side and without WebGL, so CLS stays zero. Reduced motion freezes the first frame.
@gc/shader-bg - Shader imageAn image through water, liquid metal, fluted glass or halftone, inked with the site's variables. The plain image renders until WebGL is ready. Reduced motion freezes the first frame.
@gc/shader-image - Grid patternA hairline grid in the site's border colour with a few cells breathing in and out on --ambient-breathe. Forked from Magic UI and re-tokened; the cells only exist while the grid is on-screen. Reduced motion shows the grid, still.
@gc/grid-pattern - SpotlightA soft radial glow in the site's own colour that follows a fine pointer on spring.press and glides home to the centre when it leaves. Touch and reduced motion get the centred glow, still.
@gc/spotlight - BeamsA few hairline curves sweeping the section, each breathing in opacity and drifting one travel token on --ambient-breathe, out of phase. The loop stops off-screen. Reduced motion holds the first frame.
@gc/beams
Sections
4 shipped
Tier 3. Server components composed from primitives. No hero.
- Logo railPartner or press logos on one continuous rail: a server component around marquee, the logos passed in as the site's own elements. Reduced motion stops the rail and lets it scroll by hand.
@gc/logo-rail - Stats bandHeadline figures that cascade in and count into place together, on stagger and counter. Up to six cards stagger; more reveal as one block. Reduced motion crossfades the band with final values.
@gc/stats-band - Testimonial wallA wall of quotes with figure, blockquote and figcaption semantics, each card cascading in on stagger. Up to six stagger; more reveal as one block. Reduced motion crossfades the wall.
@gc/testimonial-wall - CTA bandThe closing ask: copy cascading in on stagger, the primary action on magnetic, and a slot behind the copy for one ambient effect. Reduced motion crossfades the copy and the button stays put.
@gc/cta-band
Recipes
demo only
Never in the registry. Each proves a MOTION.md choreography on throwaway content, for a site to copy by hand.