Tidal Glass / DESIGN & COMPONENTS

Tidal Glass
Made of its own parts.

The sculpture remains visible outside the pane and diffuses as it passes behind it. Thin reflections, layered shadows and a small tint make glass a visible material rather than an opaque container.

01 / Palette & type

A full-bleed optical sculpture, marine shadows, glacier text and amber highlights. Clear panes have a reflective rim and restrained surface tint; they carry the gallery rather than hiding its backdrop.

Marine#102d36

Glacier#f0f6ed

Mist#91bdc4

Amber#e5c18b

Syne, drawn for a Paris art centre, gives the gallery titles a wide, fluid voice. DM Sans reads the text and small mono metadata leaves artwork in the foreground.

02 / Composition & behavior

An object-led composition: a compact introduction and material desk sit beside a larger clear gallery window. Four small study thumbnails leave room to see the sculpture through the pane. The window precedes material tools on mobile.

Background drift is off by default, explicitly toggleable and suppressed by reduced motion. Selecting a study changes the original rendered backdrop and keeps all material controls mounted.

Backdrop brightness is bounded so the clear surface keeps readable text across every tint setting. Presets, search, filter, saved state and ranges are labeled; solid mode and reduced motion remain explicit alternatives.

03 / Controls, including the edges

Inspect a component

Component inventory (scroll to inspect)

01
Searchable gallery and local saved selection
An object-led composition: a compact introduction and material desk sit beside a larger clear gallery window. Four small study thumbnails leave room to see the sculpture through the pane. The window precedes material tools on mobile.
02
Clear, frosted and smoked glass with a solid fallback
Backdrop brightness is bounded so the clear surface keeps readable text across every tint setting. Presets, search, filter, saved state and ranges are labeled; solid mode and reduced motion remain explicit alternatives.
03
Material CSS copy and download
Original layered CSS glass uses bounded 12–48% tint, diffusion, controlled backdrop brightness and an opaque fallback. The rendered and exported material share a contract. Sculptures are generated offline with Three.js and served as responsive WebP; the gallery loads no 3D engine. No Glass3D code or texture is copied.
04
An independent component book
Original layered CSS glass uses bounded 12–48% tint, diffusion, controlled backdrop brightness and an opaque fallback. The rendered and exported material share a contract. Sculptures are generated offline with Three.js and served as responsive WebP; the gallery loads no 3D engine. No Glass3D code or texture is copied.
05
Select, tooltip & scroll area
Keyboard behavior is shared; this theme owns the popup colors, border, radius, type and focus.
06
Export & limits
Sculptures are pre-rendered images, not live 3D. Saved choices live only in the open page; browser support determines blur rendering and unsupported contexts retain solid panels.