CSSScript Demo Page

Hyalite Liquid Glass JS Library Demos

Download Back To CSSScript.Com

Drag the glass across the field and watch the lines bend, stretch, and catch the rim light.

01 / Live lens

A surface you can feel.

Grab the card anywhere. Use a mouse, trackpad, or touch.

backdrop / high contrast field x +000 / y +000

Live surface hyalite / lens

Edge response LIQUID
GLASS

drag to refract active

ready to drag

02 / Surface tuning

Dial in the edge.

Changes update every surface that is currently attached.

Live parameters

Lens profile

synced

Beveledge depth Thicknessglass depth Blurcentre frost Dispersioncolour split Rim lightedge light Light directionrim angle Smoothrim softness Settleresize delay

03 / API interactions

Try the moving parts.

Small probes for watching new nodes, self filtering, and resize settling.

watch(container, selector)

New surfaces

watching

No dynamic surfaces yet.

self / settle

Filter target

self: true

Self displacement