Molten Chrome
NewProA slowly morphing liquid-metal form, ray marched in a shader and lit by a procedural studio, with a glossy floor, thin-film iridescence and a pointer that dents the surface.
- shader
- webgl
- raymarching
- metal
- background
- interactive
Preset
Installation
Pro — coming soon
The source and installation instructions for this item ship with Kagadmodyaa Pro.
Usage
The effect fills its parent, so give the parent a height and put your content above it. Choose a theme with preset; any prop you pass as well overrides the preset.
import { MoltenChrome } from '@/components/effects/molten-chrome/molten-chrome'
export function Hero() {
return (
<section className="relative h-[640px] overflow-hidden">
<MoltenChrome className="absolute inset-0" />
<div className="relative z-10">{/* your content */}</div>
</section>
)
}<MoltenChrome preset="Gold Leaf" speed={1} />Presets
ChromeGold LeafOil SlickMercury DawnPorcelain
Props
| Name | Type | Default | Description |
|---|---|---|---|
| preset | 'Chrome' | 'Gold Leaf' | 'Oil Slick' | 'Mercury Dawn' | 'Porcelain' | none (the defaults below) | A named theme. Any prop you pass as well overrides the preset’s value. |
| speed | number | 1 | How fast the form morphs. 0 freezes it. Range 0 to 2.5. |
| blobbiness | number | 0.6 | How liquidly the lobes fuse together. Range 0 to 1. |
| size | number | 1 | Scale of the form. Range 0.7 to 1.25. |
| iridescence | number | 0 | Thin-film colour shifts on the metal. Range 0 to 1. |
| reflection | number | 1.1 | Strength of the studio reflections. Range 0 to 2. |
| studioGlow | number | 0.42 | How much of the room, its sky gradient and horizon glow, shows in the metal. Range 0 to 2. |
| lightAngle | number | 0 | Rotates the whole light rig around the form. Range 0 to 360. |
| metalColor | string | '#f1f3f7' | The colour of the mirror at normal incidence: silver, gold, copper. A hex colour. |
| keyColor | string | '#ffffff' | Colour of the large key soft box. A hex colour. |
| fillColor | string | '#c9d6ea' | Colour of the fill strips and the sky. A hex colour. |
| rimColor | string | '#6fb0ff' | Colour of the back rim lights. A hex colour. |
| background | string | '#07080b' | Backdrop and floor colour. A light colour gives a pearl-on-paper look. A hex colour. |
| floorReflection | boolean | true | Mirror the form in a glossy floor. |
| interactive | boolean | true | The pointer dents the surface and tilts the lights. |
| grain | number | 0.4 | Film grain. Range 0 to 1. |
| className | string | — | Extra class on the root element. The effect fills its parent: give the parent a height. |
| style | CSSProperties | — | Inline style on the root element. |
Behaviour
- Draws on a WebGL canvas that is created in the browser only, so there is nothing to hydrate differently.
- Pauses while it is off screen or the tab is hidden, and lowers its resolution automatically if frames run slow.
- With
prefers-reduced-motionit draws one still frame instead of animating. - Without WebGL you see a still gradient in the same colours.
- It is decorative: hidden from assistive technology, and it never takes focus or captures clicks.