Future UI

Frozen Fracture

Backgrounds

WebGL2 ice crystal frost background with dendritic growth and prismatic refraction.

backgroundwebglshadericefrostcrystalinteractivemouse

No preview available

WebGL2 Shader ~ Move cursor to grow frost crystals

Controls

Demo Hero Content
#67e8f9
#a78bfa
0.2
1
1

Backgrounds / React Component

About Frozen Fracture

WebGL2 ice crystal frost background with dendritic growth and prismatic refraction.

Category Backgrounds
Framework React + TypeScript
Tags background, webgl, shader, ice, frost, crystal, interactive, mouse

Install Frozen Fracture in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/frozen-fracture.json?key=YOUR_LICENSE_KEY"

Usage example

import { FrozenFracture } from './FrozenFracture';

export default function Example() {
  return (
    <div style={{ width: '100%', height: 400, position: 'relative' }}>
      <FrozenFracture accentColor="#67e8f9" secondaryColor="#a78bfa" />
    </div>
  );
}