Frost Glass Melt
Frost Glass Melt is an interactive background in the UI HUB interactive backgrounds collection. A frosted-glass pane on a fullscreen Canvas 2D: a per-cell frost grid sits over an animated winter scene (radial gradient + drifting snow motes with sine sway and edge wrap).
The component is driven by 10 documented props (background, frost, scene, cell, meltRadius, meltSpeed and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Canvas 2D; requestAnimationFrame loop; ResizeObserver.
Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Frost Glass Melt?
A frosted glass pane that melts around your pointer to reveal a winter scene and re-freezes when idle.
Frost Glass Melt at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 10
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Frost Glass Melt works
A frosted-glass pane on a fullscreen Canvas 2D: a per-cell frost grid sits over an animated winter scene (radial gradient + drifting snow motes with sine sway and edge wrap). The pointer radiates heat into a diffusing 3x3 heat buffer with inverse-square falloff; heat lowers frost levels to reveal the scene and Click banks a 1.4x burst. Idle, heat decays so frost slowly re-freezes and the pane self-heals. Each frost cell renders with a twinkling value-noise alpha grain. DPR-capped at 2; prefers-reduced-motion renders one static frosted frame; touch-action none.
Technical information for Frost Glass Melt
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas |
| State change | fully frosted pane with shimmering crystals to pointer-thawed clear window revealing the drifting snow scene |
| Props | 10 configurable |
| Usage example | Included on this page |
What Frost Glass Melt requires
- Canvas 2D
- requestAnimationFrame loop
- ResizeObserver
- per-cell frost + heat buffers
- 3x3 heat diffusion
- snow-mote scene layer
- pointer heat + click burst
- value-noise twinkle
- devicePixelRatio cap
- prefers-reduced-motion support
How to use Frost Glass Melt
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <FrostGlassMelt /> in your page using that import path.
- Pass any of the 10 documented props to change colours, density, speed or behaviour.
Frost Glass Melt questions
What is Frost Glass Melt?
A frosted glass pane that melts around your pointer to reveal a winter scene and re-freezes when idle.
How does Frost Glass Melt work?
A frosted-glass pane on a fullscreen Canvas 2D: a per-cell frost grid sits over an animated winter scene (radial gradient + drifting snow motes with sine sway and edge wrap). The pointer radiates heat into a diffusing 3x3 heat buffer with inverse-square falloff; heat lowers frost levels to reveal the scene and Click banks a 1.4x burst. Idle, heat decays so frost slowly re-freezes and the pane self-heals. Each frost cell renders with a twinkling value-noise alpha grain. DPR-capped at 2; prefers-reduced-motion renders one static frosted frame; touch-action none.
Which category does Frost Glass Melt belong to?
Frost Glass Melt is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the background prop do in Frost Glass Melt?
Base background colour behind the glass. It defaults to "#060A14".
What does the frost prop do in Frost Glass Melt?
Frost crystal colour. It defaults to "#D9E6FF".
Is Frost Glass Melt free to use?
Frost Glass Melt is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Frost Glass Melt use?
Frost Glass Melt uses React and is styled with Tailwind CSS.
What does Frost Glass Melt need to run?
Frost Glass Melt needs Canvas 2D, requestAnimationFrame loop, ResizeObserver and per-cell frost + heat buffers.