# Galactrex UI Components

> 112 animated React components that install into your project as plain source with one command. 11 are free; Creative and Pro include all of them.

Requires React, Tailwind CSS v4 and the motion package. Set up once with `npx @galactrex/ui init`, then `npx @galactrex/ui add <name>`. Paid parts need `npx @galactrex/ui login` with an API key from https://galactrex.com/account/. Licensed for your own and client projects; not for resale or redistribution (https://galactrex.com/ui/license/).

- [Library with live previews](https://galactrex.com/ui/)
- [Setup guide](https://galactrex.com/docs/ui-components-setup/)
- [Plans](https://galactrex.com/pricing/)

## Originals

Things no other library has. Playful on purpose, and still built for real products.

- [Pull Cord](https://galactrex.com/ui/pull-cord/index.md) (Free): A light-switch cord you tug to flip the theme.
- [Stamp](https://galactrex.com/ui/stamp/index.md) (Creative): A rubber stamp that slams down with real ink.
- [Split-Flap](https://galactrex.com/ui/split-flap/index.md) (Creative): Text that flips into place like a departure board.
- [Scratch Card](https://galactrex.com/ui/scratch-card/index.md) (Creative): Scratch off the foil to reveal what is underneath.
- [Holo Foil](https://galactrex.com/ui/holo-foil/index.md) (Creative): A card printed on foil that catches the light.
- [Tear-Off Sticker](https://galactrex.com/ui/tear-off/index.md) (Creative): Peel a sticker by its corner to see what is under it.
- [Shatter Button](https://galactrex.com/ui/shatter-button/index.md) (Creative): Breaks into shards where you click, then flies back together.
- [Gravity Text](https://galactrex.com/ui/gravity-text/index.md) (Creative): Letters come loose, fall, bounce and climb back.
- [Pixel Dissolve](https://galactrex.com/ui/pixel-dissolve/index.md) (Creative): Content leaves as dithered pixels and comes back the same way.
- [CRT Power-Off](https://galactrex.com/ui/crt-off/index.md) (Creative): Switches content off like an old television.
- [Typo Typewriter](https://galactrex.com/ui/typo-typewriter/index.md) (Creative): Types like a person: slips, notices, fixes.
- [Synth Knob](https://galactrex.com/ui/synth-knob/index.md) (Creative): A rotary knob from a synth, with detents.
- [Slot Reel](https://galactrex.com/ui/slot-reel/index.md) (Creative): Spins through a list and lands on the winner.
- [Bubble Wrap](https://galactrex.com/ui/bubble-wrap/index.md) (Free): A sheet of bubbles that pop. Pure fidget.
- [Jelly Switch](https://galactrex.com/ui/jelly-switch/index.md) (Creative): A toggle whose knob is made of jelly.
- [Flock Cursor](https://galactrex.com/ui/flock-cursor/index.md) (Creative): A flock of birds that follows the pointer.

## Chrome

Borders, frames and edges to put around real interfaces.

- [Border Beam](https://galactrex.com/ui/border-beam/index.md) (Free): A light that travels the border of any container.
- [Border Tracer](https://galactrex.com/ui/border-tracer/index.md) (Creative): Draws a border as one stroke on hover, focus, arrival or state.
- [Spotlight Border](https://galactrex.com/ui/spotlight-border/index.md) (Creative): Lights only the stretch of border nearest the pointer.
- [HUD Frame](https://galactrex.com/ui/hud-frame/index.md) (Creative): Corner brackets, ticks and a caption around real content.
- [Terminal Frame](https://galactrex.com/ui/terminal-frame/index.md) (Creative): A terminal that types its commands and prints their output.
- [Light Sweep](https://galactrex.com/ui/light-sweep/index.md) (Creative): One pass of light across a surface.
- [Border Pulse](https://galactrex.com/ui/border-pulse/index.md) (Creative): Rings leave the border like sonar: this is live.
- [Moving Border](https://galactrex.com/ui/moving-border/index.md) (Free): Marching ants: dashes travelling round the edge.
- [Cursor Border](https://galactrex.com/ui/cursor-border/index.md) (Creative): A border that turns toward the pointer from a distance.
- [Gradient Border](https://galactrex.com/ui/gradient-border/index.md) (Creative): A gradient that slowly turns around the edge.
- [Glow Border](https://galactrex.com/ui/glow-border/index.md) (Creative): A soft light around a lit panel, breathing slowly.
- [Edge Glow](https://galactrex.com/ui/edge-glow/index.md) (Creative): A bright line along one edge, lit from above.
- [Corner Glow](https://galactrex.com/ui/corner-glow/index.md) (Creative): Light pooling in one corner, leaning in on hover.
- [Animated Corners](https://galactrex.com/ui/animated-corners/index.md) (Creative): Corner brackets that close into a full frame.
- [Corner Frame](https://galactrex.com/ui/corner-frame/index.md) (Creative): A panel with cut-steel chamfered corners.
- [Tech Frame](https://galactrex.com/ui/tech-frame/index.md) (Creative): An instrument panel: title tab, segments, status light.
- [Window Frame](https://galactrex.com/ui/window-frame/index.md) (Creative): A desktop window you can drag and roll up.
- [Browser Frame](https://galactrex.com/ui/browser-frame/index.md) (Creative): Browser chrome whose address types itself in.
- [Device Frame](https://galactrex.com/ui/device-frame/index.md) (Creative): A phone, tablet, laptop or watch drawn around real content.
- [Scanner Frame](https://galactrex.com/ui/scanner-frame/index.md) (Creative): A beam sweeping over content while it is checked.
- [Focus Frame](https://galactrex.com/ui/focus-frame/index.md) (Creative): One frame for a group, gliding to what you point at.
- [Animated Divider](https://galactrex.com/ui/animated-divider/index.md) (Creative): A divider that draws itself and carries a signal.
- [Scanline](https://galactrex.com/ui/scanline/index.md) (Creative): The texture of an old monitor over content.
- [Edge Tracer](https://galactrex.com/ui/edge-tracer/index.md) (Creative): One comet round the edge: an acknowledgement.

## Cards

Surfaces that answer the pointer.

- [Spotlight Card](https://galactrex.com/ui/spotlight-card/index.md) (Creative): A surface lit from where the pointer is.
- [Magnetic Card](https://galactrex.com/ui/magnetic-card/index.md) (Creative): Leans toward the pointer; its contents travel further.
- [Tilt Card](https://galactrex.com/ui/tilt-card/index.md) (Creative): Real 3D: layers lift off the face as it turns.
- [Glow Card](https://galactrex.com/ui/glow-card/index.md) (Creative): A card floating over its own light.
- [Border Beam Card](https://galactrex.com/ui/border-beam-card/index.md) (Creative): The highlighted card, with a light round its border.
- [Reveal Card](https://galactrex.com/ui/reveal-card/index.md) (Creative): A cover that gives way to its details.
- [Expandable Card](https://galactrex.com/ui/expandable-card/index.md) (Creative): Grows in place and pushes the rest down smoothly.
- [Morphing Card](https://galactrex.com/ui/morphing-card/index.md) (Creative): Click the card and the card becomes the dialog.
- [Flip Card](https://galactrex.com/ui/flip-card/index.md) (Creative): Two faces that turn over in 3D.
- [Stack Card](https://galactrex.com/ui/stack-card/index.md) (Creative): A deck you fling through, left or right.
- [Parallax Card](https://galactrex.com/ui/parallax-card/index.md) (Creative): A window onto a scene in layers.
- [Cursor Card](https://galactrex.com/ui/cursor-card/index.md) (Creative): The pointer becomes a label that says what a click does.
- [Bento Card](https://galactrex.com/ui/bento-card/index.md) (Creative): Bento grid cells that lift and invite.
- [Feature Card](https://galactrex.com/ui/feature-card/index.md) (Free): The feature card, done with care.
- [Stat Card](https://galactrex.com/ui/stat-card/index.md) (Creative): A metric that tells its own story.
- [Floating Card](https://galactrex.com/ui/floating-card/index.md) (Creative): Hangs in the air with a shadow that breathes.
- [Interactive Card](https://galactrex.com/ui/interactive-card/index.md) (Creative): A working card: select it, act on it.

## Buttons

Actions with feel, never slower to click.

- [Magnetic Button](https://galactrex.com/ui/magnetic-button/index.md) (Free): Leans toward the pointer and springs back.
- [Hold Button](https://galactrex.com/ui/hold-button/index.md) (Creative): Confirm by holding, from a pointer or the keyboard.
- [Shimmer Button](https://galactrex.com/ui/shimmer-button/index.md) (Creative): A solid button with a slow pass of light.
- [Border Beam Button](https://galactrex.com/ui/border-beam-button/index.md) (Creative): An outline button with a light running round it.
- [Morph Button](https://galactrex.com/ui/morph-button/index.md) (Creative): A button that becomes the form it stands for.
- [Gooey Button](https://galactrex.com/ui/gooey-button/index.md) (Creative): A liquid button that buds droplets on hover.
- [Spotlight Button](https://galactrex.com/ui/spotlight-button/index.md) (Creative): A quiet button lit from where the pointer is.
- [Ripple Button](https://galactrex.com/ui/ripple-button/index.md) (Creative): A ring and a wave from the exact point of contact.
- [Press Button](https://galactrex.com/ui/press-button/index.md) (Free): A button with real travel, like a mechanical key.
- [Loading Button](https://galactrex.com/ui/loading-button/index.md) (Creative): Carries its own outcome: spinner, tick or shake.
- [Liquid Button](https://galactrex.com/ui/liquid-button/index.md) (Creative): Fills to the brim with a rolling wave on hover.
- [Expand Button](https://galactrex.com/ui/expand-button/index.md) (Creative): An icon that grows its label when you reach for it.
- [Icon Morph Button](https://galactrex.com/ui/icon-morph-button/index.md) (Creative): Menu into close, play into pause: the strokes travel.
- [Animated Icon Button](https://galactrex.com/ui/animated-icon-button/index.md) (Creative): Icons that act out what they do.

## Typography

Type that arrives, resolves and counts.

- [Decode Text](https://galactrex.com/ui/decode-text/index.md) (Free): Text that resolves from scrambled glyphs, left to right.
- [Number Ticker](https://galactrex.com/ui/number-ticker/index.md) (Creative): Rolls each digit to its new value, like a mechanical counter.
- [Blur Text](https://galactrex.com/ui/blur-text/index.md) (Creative): Words come into focus one at a time.
- [Reveal Text](https://galactrex.com/ui/reveal-text/index.md) (Creative): Each word rises out of its own slot.
- [Scramble Text](https://galactrex.com/ui/scramble-text/index.md) (Creative): Old text scrambles into the new.
- [Typewriter Text](https://galactrex.com/ui/typewriter-text/index.md) (Creative): Types, holds, deletes and types the next.
- [Morphing Text](https://galactrex.com/ui/morphing-text/index.md) (Creative): Words that melt into each other.
- [Rotating Text](https://galactrex.com/ui/rotating-text/index.md) (Creative): One slot in a sentence that keeps turning over.
- [Sliding Text](https://galactrex.com/ui/sliding-text/index.md) (Creative): Letters roll over on hover like a rolling sign.
- [Masked Text](https://galactrex.com/ui/masked-text/index.md) (Creative): Big letters as a window onto a moving image.
- [Gradient Text](https://galactrex.com/ui/gradient-text/index.md) (Creative): A slow gradient flowing through the letters.
- [Shimmer Text](https://galactrex.com/ui/shimmer-text/index.md) (Free): A band of light sweeping across muted text.
- [Glitch Text](https://galactrex.com/ui/glitch-text/index.md) (Creative): A signal breaking up in short bursts.
- [Split Text](https://galactrex.com/ui/split-text/index.md) (Creative): The workhorse: letters or words in, with an effect and an order.
- [Wave Text](https://galactrex.com/ui/wave-text/index.md) (Creative): Letters bob in a travelling wave.
- [Text Loop](https://galactrex.com/ui/text-loop/index.md) (Creative): Loops through any content, not only words.
- [Counter Text](https://galactrex.com/ui/counter-text/index.md) (Creative): A number that counts up when it arrives.
- [Marquee](https://galactrex.com/ui/marquee/index.md) (Creative): An endless row that drifts sideways.
- [Infinite Ticker](https://galactrex.com/ui/infinite-ticker/index.md) (Creative): A ticker tape that speeds up when you scroll.

## Backgrounds

Depth behind content that never fights the words.

- [Perspective Grid](https://galactrex.com/ui/perspective-grid/index.md) (Creative): A floor of grid lines receding to a horizon.
- [Animated Grid](https://galactrex.com/ui/animated-grid/index.md) (Creative): A fine grid where single cells light up and fade.
- [Dot Grid](https://galactrex.com/ui/dot-grid/index.md) (Free): A matrix of dots that wakes up under the pointer.
- [Moving Grid](https://galactrex.com/ui/moving-grid/index.md) (Creative): A flat grid that slides steadily one way.
- [Starfield](https://galactrex.com/ui/starfield/index.md) (Creative): A deep field of stars drifting in three depths.
- [Particle Field](https://galactrex.com/ui/particle-field/index.md) (Creative): Drifting points that join into a loose network.
- [Noise Background](https://galactrex.com/ui/noise-background/index.md) (Creative): Soft clouds of smooth noise that slowly evolve.
- [Grain Background](https://galactrex.com/ui/grain-background/index.md) (Creative): Film grain that takes the flatness off a surface.
- [Aurora Background](https://galactrex.com/ui/aurora-background/index.md) (Creative): Curtains of soft light that sway like an aurora.
- [Beam Background](https://galactrex.com/ui/beam-background/index.md) (Creative): Thin beams of light falling down faint rails.
- [Spotlight Background](https://galactrex.com/ui/spotlight-background/index.md) (Creative): Stage light sweeping slowly across the scene.
- [Radial Glow](https://galactrex.com/ui/radial-glow/index.md) (Creative): One soft pool of light you can place anywhere.
- [Cursor Glow](https://galactrex.com/ui/cursor-glow/index.md) (Creative): A soft light that follows the mouse around a section.
- [Mesh Gradient](https://galactrex.com/ui/mesh-gradient/index.md) (Creative): Soft colour fields that melt together and wander.
- [Animated Gradient](https://galactrex.com/ui/animated-gradient/index.md) (Free): A gradient that drifts slowly across its colours.
- [Gradient Mesh](https://galactrex.com/ui/gradient-mesh/index.md) (Creative): A rolling surface drawn in lines, shaded by depth.
- [Light Rays](https://galactrex.com/ui/light-rays/index.md) (Creative): Rays fanning down from above, slowly turning.
- [Shooting Stars](https://galactrex.com/ui/shooting-stars/index.md) (Creative): A quiet sky where a streak crosses now and then.
- [Warp Field](https://galactrex.com/ui/warp-field/index.md) (Creative): Stars rushing out of a vanishing point.
- [Shader Background](https://galactrex.com/ui/shader-background/index.md) (Creative): Marbled flow rendered on the graphics card.
- [Interference](https://galactrex.com/ui/interference-background/index.md) (Creative): An evolving sculpture of interwoven silver filaments.
- [Scanline Background](https://galactrex.com/ui/scanline-background/index.md) (Creative): A whole phosphor screen to set content on.