Moiré Screens
Backgrounds
Source and install need .
pnpm dlx shadcn@latest add @assembli/soap-filmSoap Film
WebGL soap film draining in its frame. Gravity thins it to black at the top, slow convection and rising plumes churn the soap, and every color is real thin-film interference summed across the visible spectrum, so the bands run gold, magenta, blue and green in their true order. Pastel over a light box by day, vivid against black at night. The pointer blows eddies into the film.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
mode
"auto" | "light" | "dark"
Default
"auto"Follow the page theme (a film over a light box by day, against black at night), or force one.
thickness
number
Default
1500How thick the film runs at the bottom, in nanometres: thicker shows more, paler bands.
swirl
number
Default
0.6How much the film churns, 0 (glassy bands) to 1 (turbulent).
vivid
number
Default
0.7Strength of the color in light mode, 0 (pearl) to 1 (vivid).
speed
number
Default
1Time scale. 0 holds the film still.
interactive
boolean
Default
trueMoving the pointer blows eddies into the film.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "auto" | "light" | "dark" | "auto" | Follow the page theme (a film over a light box by day, against black at night), or force one. |
| thickness | number | 1500 | How thick the film runs at the bottom, in nanometres: thicker shows more, paler bands. |
| swirl | number | 0.6 | How much the film churns, 0 (glassy bands) to 1 (turbulent). |
| vivid | number | 0.7 | Strength of the color in light mode, 0 (pearl) to 1 (vivid). |
| speed | number | 1 | Time scale. 0 holds the film still. |
| interactive | boolean | true | Moving the pointer blows eddies into the film. |
