Trending Society

Hopper | UI components | Trending Society

More from @crucible, 103 components

All @crucible

Anneal component
@crucible
Text that resolves from a soft blur into sharp focus, staggered by word or character, when it scrolls into view. Falls back to a fade under reduced motion.
Text
Arc component
@crucible
An electric-storm background: seeded midpoint-displacement lightning bolts fork down from a faint cloud glow toward random ground points, drawn as layered strokes (wide glow, colored haze, white-hot core) with flicker re-strikes and afterimage persistence. Click to call a strike to your cursor. Photosensitivity-safe by design: shaped pulse trains (max 3 peaks, 130ms+ apart), a hard 1.25s strike cooldown, and a flashCap clamp on full-frame luminance. Canvas 2D, idle-silent between strikes, offscreen-paused, reduced-motion poster frame. Clicks stack (up to three queued strikes, still cooldown-clamped), a `strike()` ref handle calls bolts programmatically, and a ghost click idles the storm when untouched.
Backgrounds
Arcade component
@crucible
8-bit attract-mode background: a chunky pixel starfield drifting on three parallax depth layers, seeded space-shooter sprites gliding across on a two-frame flap, and a faint pixel grid receding to a horizon. Crisp unsmoothed pixels. Canvas 2D, seeded, offscreen-paused, reduced-motion-safe.
Backgrounds
Argon component
@crucible
SVG gas-discharge tube lettering — ignition travels along each glyph's tube with a seeded strike flicker, then holds with a faint mains hum; the letter under the pointer destabilises. Neon, argon and mercury presets; fully lit and steady under reduced motion.
Text
Armature component
@crucible
Orbiting icon rings around a fixed center slot. Compose Armature + ArmatureRing for a multi-radius orbital system with per-ring speed, direction, and an optional eccentric elliptical ring. Pure CSS, pause-on-hover.
Other
Bevel component
@crucible
A glass-refraction surface card: backdrop-blurred glass with a multi-layer bevel edge, a slow glacial-cyan caustic drifting along the top rim, and a refracted offset highlight that slides with a subtle perspective tilt on hover. Pure CSS with eased custom-property transitions; static caustics and no tilt under reduced motion; a ghost light idles across the glass when untouched.
Layout
Billet component
@crucible
Content-shaped skeleton placeholder — matte graphite blocks crossed by a single cool-white light pass (heat-pass timing, not a conveyor). Card / text / circle / rect presets compose to prefigure any layout; @property-driven, zero dependencies, role=status + aria-busy, gentle opacity breathe under reduced motion.
Feedback
Bitmap component
@crucible
Chunky 8-bit pixel loader — a hard-edged grid that fills cell-by-cell. Determinate bar (with a pulsing frontier) or an indeterminate marching band, plus a crisp bitmap-radar spinner that snaps cell-to-cell via steps(). Zero dependencies, SSR-safe, role=progressbar with aria-valuenow; collapses to a designed static frame under reduced motion.
Feedback
Bokeh component
@crucible
Dreamy out-of-focus lights: a parallax field of soft circular light discs — each with a brighter aperture rim — drifting slowly through the dark, sized and layered by depth like night lights through a defocused lens, with a few sharp in-focus specks. 2D canvas with additive blending, seeded PRNG for a deterministic scatter, pauses offscreen, honors prefers-reduced-motion with a still scatter.
Backgrounds
Brutal component
@crucible
A self-contained neo-brutalist theme preset — a flat white card with hard 3px black borders, a solid blur-free offset drop-shadow, chunky mono type, a loud accent block, a stat, a rotated corner sticker, and two buttons. Interactive blocks do the classic brutalist nudge toward their shadow on hover and press. A keyboard-operable radiogroup of accent swatches re-tokens the whole panel live; the palette is fully exposed via presets and colors. Pure CSS — reduced motion pins every block to its raised resting pose.
Other
Buoy component
@crucible
Floating action button that springs open an arc of glass bubble actions — buoyant overshoot with a bottom-up stagger, asynchronous idle bob, liquid squash on toggle, and a single coral accent on the active bubble. Full menu-button keyboard support with Escape to close.
Navigation
Caliper component
@crucible
Before/after comparison slider that clips a leading layer with a draggable divider. Machinist's-caliper hairline with tick marks, a knurled grip, a live vernier readout, and a 50% detent. Accepts arbitrary children, keyboard-accessible, hover/drag/autoplay modes.
Other

Hopper

Install

Live preview

Registry dependencies0

Packages0

Hopper

Install

Live preview

Registry dependencies0

Packages0

Source

More from @crucible, 103 components

The Signal

Install

Live preview

Registry dependencies0

Packages0

Install

Live preview

Registry dependencies0

Packages0

Source

More from @crucible103, 103 components

More from @crucible, 103 components