Ember Husk
Ember Husk is an interactive background in the UI HUB interactive backgrounds collection. A raw-WebGL (three.js) scene of a fractured volcanic husk with a single fixed-timestep physics update (PHYS_STEP 1/120 with up to 5 substeps and 0.88 damping) integrated into the render loop.
The component is driven by 14 documented props (background, size, structure, rock, core, crosses and 8 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: WebGL; three; requestAnimationFrame loop.
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 Ember Husk?
A dark WebGL scene of a fractured volcanic husk: a cracked rock shell that tumbles open with a staggered scatter entrance to reveal a molten ember core, ringed by drifting marker crosses, hot beads and debris, responding to pointer reach with a spring-repel on the shell.
Ember Husk at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React and Three.js
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 14
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Ember Husk works
A raw-WebGL (three.js) scene of a fractured volcanic husk with a single fixed-timestep physics update (PHYS_STEP 1/120 with up to 5 substeps and 0.88 damping) integrated into the render loop. On mount the cracked rock shell (HULL_PLANES polyhedral shards clipped with CLIP_EPS) scatters and tumbles in via per-shard staggered entrance forces (scatter/tumble/stagger); as the shell opens, a molten core shines through with an animated flow noise (ROCK frag + LIGHT_GLSL + NOISE_GLSL) tinted by intensity and hotColor. The scene is dressed with orbiting marker crosses (CROSS_ARM geometry, WAIST/BEVEL), a free-floating debris field, and hot bead orbs. Pointer response maps pointer reach/strength into a repel force on the shell shards that springs back via settle; idle drift adds spin, bob and sway. A glow pass renders the core through down/up-sampled render targets (PREFILTER/DOWN/UP/COMPOSITE) with strength, radius and threshold, and the frame buffer is DPR-capped per quality tier. The whole loop is gated on visibility and the canvas resizes with its host.
Technical information for Ember Husk
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | WebGL shaders, ResizeObserver |
| State change | a dark cracked rock shell frozen in place under a cold sky to shards scatter and tumble in on a staggered entrance to reveal the molten ember core, ringed by crosses, beads and debris under pointer repel |
| Props | 14 configurable |
| Usage example | Not published yet |
What Ember Husk requires
- WebGL
- three
- requestAnimationFrame loop
- fixed-timestep physics (120hz, 5 substeps)
- RenderTarget glow compositing
- ResizeObserver + devicePixelRatio cap
- visibilitychange gate
Ember Husk questions
What is Ember Husk?
A dark WebGL scene of a fractured volcanic husk: a cracked rock shell that tumbles open with a staggered scatter entrance to reveal a molten ember core, ringed by drifting marker crosses, hot beads and debris, responding to pointer reach with a spring-repel on the shell.
How does Ember Husk work?
A raw-WebGL (three.js) scene of a fractured volcanic husk with a single fixed-timestep physics update (PHYS_STEP 1/120 with up to 5 substeps and 0.88 damping) integrated into the render loop. On mount the cracked rock shell (HULL_PLANES polyhedral shards clipped with CLIP_EPS) scatters and tumbles in via per-shard staggered entrance forces (scatter/tumble/stagger); as the shell opens, a molten core shines through with an animated flow noise (ROCK frag + LIGHT_GLSL + NOISE_GLSL) tinted by intensity and hotColor. The scene is dressed with orbiting marker crosses (CROSS_ARM geometry, WAIST/BEVEL), a free-floating debris field, and hot bead orbs. Pointer response maps pointer reach/strength into a repel force on the shell shards that springs back via settle; idle drift adds spin, bob and sway. A glow pass renders the core through down/up-sampled render targets (PREFILTER/DOWN/UP/COMPOSITE) with strength, radius and threshold, and the frame buffer is DPR-capped per quality tier. The whole loop is gated on visibility and the canvas resizes with its host.
Which category does Ember Husk belong to?
Ember Husk 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 Ember Husk?
Scene backdrop: color (clear + fog tint), glowColor (spill light), glow (radiance 0-10). It defaults to { color: "#1A0402", glowColor: "#FF2606", glow: 6 }.
What does the size prop do in Ember Husk?
Global scale of the husk, its shards, orbits and motion. It defaults to 3.7.
Is Ember Husk free to use?
Ember Husk 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 Ember Husk use?
Ember Husk uses React and Three.js and is styled with Tailwind CSS.
What does Ember Husk need to run?
Ember Husk needs WebGL, three, requestAnimationFrame loop and fixed-timestep physics (120hz, 5 substeps).