Halden Glassworks (concept)
Concept · 2026 · 2026
A luxury glassware direction: a refractive WebGL object over editorial serif type, slow masked line reveals, a sideways product reel and a two-panel page wipe. Use it as the reference for any high-end product brand.
Effects that recreate this look
- 01
Featured WebGL WebGL & 3D expertRefractive Glass Blob
A noise-displaced icosahedron rendered as fake glass: the headline and drifting colour blobs behind it are rendered to a texture and refracted through the blob with chromatic aberration, a lime Fresnel rim and a specular hit, while it follows the pointer.
- threejs
- glsl
- canvas2d
- 02
Featured light Section Templates advancedLuxury Product Hero Section
A drop-in luxury hero: masked serif headline lines, a CSS-drawn glass flacon revealed by clip-path and floating on a 6s sine loop, a rotating textPath badge, a magnetic CTA, and swatches that re-tint the whole scene by tweening one CSS variable.
- gsap
- splittext
- svg
- 03
light Text beginnerLine Mask Reveal
An editorial block — kicker, headline, three paragraphs and a byline — where every line rises out of an overflow mask as its block scrolls into view (SplitText lines, yPercent 100 → 0, 1.1s power4.out, 0.07s stagger).
- gsap
- scrolltrigger
- splittext
- 04
Featured light Scroll intermediatePinned Horizontal Scroll Gallery
A full-height section pins while vertical scrolling drives a row of large cards sideways; each card's image parallaxes against its frame and a hairline progress bar tracks the journey.
- gsap
- scrolltrigger
- 05
light Page Transitions intermediatePanel Wipe Page Transition
A three-page demo where every navigation runs one timeline: a surface panel and a lime panel wipe up from the bottom (0.8s power4.inOut, stagger 0.08), the page swaps beneath, then they exit upward as the new content rises in.
- gsap