Fractal Glass

Overview

The hero can hold a refracted surface or a paragraph. Fractal Glass is for pages where the surface earns the paragraph.

Use it for premium heroes, AI/product launches, creative portfolios, and brand moments where the visual payoff justifies GPU work. It should make the site feel technically ambitious, not merely heavier.

The risk in production is budget. Keep meaningful content in HTML, cap DPR by device tier, reduce postprocessing on mobile, pause render loops offscreen, and ship a poster fallback that still feels intentional.

Install

Usage

Component Code

Example Production Use Case

Use this as WebGL production guidance. Verify the shipped source, rendering stack, dependency list, shader assets, resource disposal, pause/offscreen behavior, DPR strategy, poster fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Premium brand heroes where refraction and facets can prove craft without burying the message.
• WebGL surfaces that have a poster fallback, mobile simplification, and clear HTML content.
• Fractal Glass gives the hero a proof-of-craft surface while preserving HTML copy and fallback design.

Not For

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Performance Budget

Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Fractal Glass offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled.

Accessibility and Mobile

Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate.

Common Mistakes

• Making Fractal Glass the only place the message exists.
• Shipping the highest-cost visual tier on mobile without simplification or fallback.
• Forgetting poster fallback and render-loop pause.