CSS Effects & Components | ThreeUI

CSS effects and components

Browse customizable CSS effects and interface components with responsive layouts, hover states, animation, and production-ready source.

  • Performance Gauges — Tachometer

    Orange sunburst dial reading 0–7000 r/min with a redline band, a machined oil-temperature sub-dial, and a counterweighted red needle.

  • Performance Gauges — Speedometer

    0–160 km/h scale whose travelled arc fills behind the needle, with a peak-hold marker, counting digital readout, and rolling odometer.

  • Performance Gauges — Turbo Boost

    Navy −1.0 to 1.5 bar dial that separates the vacuum half from the pressure half and flags the wastegate threshold with a pulsing overboost lamp.

  • Performance Gauges — EV Power

    Regeneration-to-power scale that fills its track from zero, with a green charge segment, kilowatt readout, and battery state-of-charge bar.

  • Uplink Loader

    A cinematic secure-uplink loader with stepped progress, illuminated telemetry ticks, neon readouts, technical corner markers, mirrored side rails, scanlines, and procedural grain.

  • Koi Studies

    A tactile stack of three Japanese koi studies with CSS 3D depth, pointer tilt, drag and keyboard navigation, pixel-mask reveals, and animated halftone imagery.

  • Animated Top Dock — Sable Dock

    The authored Sable dock: a centred glass capsule whose items spring downward and widen as the pointer crosses them.

  • Animated Top Dock — Command Bar

    An inset modern header: wordmark on the left, the proximity dock centred on the bar’s midline, and a paired sign-in and gradient call to action on the right.

  • Animated Top Dock — Pixel Terminal

    A fitted terminal strip: the menu cells own the whole bar and trade width with each other, over a WebGL noise field quantised through an 8×8 ordered dither into an eight-stop dusk palette.

  • Animated Top Dock — Liquid Glass

    A vertical glass rail whose proximity field runs down the y axis, over a Three.js bead field that refracts the backdrop in screen space with per-channel dispersion and a specular rim.

  • Sketchbook

    The exact Singapore paper sketchbook with nested-strip page curls, direct dragging, tilt, zoom, a movable magnifying glass, and its complete authored plate set.

Loading ThreeUI…