Refraction components and templates
Explore 23 ThreeUI components, templates, backgrounds, and interactive effects tagged Refraction, with previews and editable implementation source.
- Advanced Glass Material
A full-screen material showcase built around a faceted spectral glass form over an interactive water field, with two-bounce refraction, edge dispersion, studio reflections, pointer-driven orbit, direct glass impulses, and a restrained technical product interface.
- Aureon Markets
A polished blue-and-violet trading hero with a refractive liquid-metal market sculpture, draggable glass metrics, multilingual navigation, and fully local account-preview dialogs.
- Elements — Water
A refracted OpenAI mark beneath pointer-driven circular ripples, cyan depth, and soft suspended particles.
- Elements — Lightning
Violet fBm arcs crawl around the Anthropic contour while pointer proximity pulls the storm closer.
- Elements — Fire
Noise-driven flame ribbons and rising embers lick upward from the Claude mark edge.
- Elements — Condensation
Transparent droplets grow, merge, fall, and resolve into soft water splash rings.
- Elements — Generative Tree
A painterly branching tree grows from warm sienna to golden tips, sways with pointer wind, and sheds soft ambient motes.
- Wood Icons — Gameboy
A carved timber handheld with a tinted glass screen, working face controls, a power switch, and a slow pointer-responsive turntable.
- Wood Icons — Keyboard
A compact wooden keyboard fitted with translucent glass keycaps, a dot-matrix readout, press feedback, and pointer orbit.
- Wood Icons — Popsicle
A blue translucent popsicle with monotone glass keycaps frozen into its refractive body, each square cap carrying a letter read through its own glass, over a procedurally grained wooden stick.
- Wood Icons — Chair
A turned timber side chair with five glass slats set into its raked back over one solid seat board, and a warm slat at the centre that lights and carries the press out to its neighbours.
- Wood Icons — Desk
A writing desk with a light table glazed into its top, a single drawer behind a smoked glass front that latches open on a spring, and a pulse that sweeps the panel when the glass is touched.
- 365 Shapes — Cube
The original six-plane glass cube paired with a pixel-built CUBE wordmark.
- 365 Shapes — Triangle
A sharp triangular glass prism paired with a pixel-built TRIANGLE wordmark.
- 365 Shapes — Hexagon
A balanced six-sided glass prism paired with a pixel-built HEXAGON wordmark.
- 365 Shapes — Pentagon
A faceted five-sided glass prism paired with a pixel-built PENTAGON wordmark.
- 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.
- Stillflora
A botanical atelier in blue and blush, with a refractive glass sculpture holding flowers, drifting petals, editorial practice cards, garden notes, and collectible editions.
- Nami
A living koi landing page with an oversized butterfly koi, layered wet scales, a refractive pond, soft typography, and three selectable color studies. Drift, Ripple, and Dusk change the pace and light.
- Understory Sting — Understory Sting
The statement lands beside the block as it turns once, then both leave to a clean loop seam.