Mycel · biomaterials lab
Packaging that grows instead of piling up
Mycel turns farm waste and mushroom roots into packaging that ships like foam and composts in your garden in six weeks.
Reaction-diffusion
A living Gray-Scott pattern grows across the hero, steers around the headline, and sprouts where the cursor passes.
Use when: Biotech, materials, climate or generative-design brands: something organic that keeps growing.
Engine: WebGPU, with a CSS fallback
Render: …
npx shadcn@latest add @sharingan/reaction-diffusionFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short kicker above the headline. |
| headline * | string (8–70 chars) | — | The promise in one line, 4–9 words. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] (1–2) | ["var(--brand, oklch(0.66 0.2 262))","oklch(0.8 0.15 160)"] | The pattern's colour, from its edges to its core. |
| background | string | "var(--background, #0b0c10)" | The colour the pattern grows on. |
| pattern | "coral" | "maze" | "spots" | "coral" | Which family of shapes grows. |
| speed | integer (2–24) | 10 | Simulation steps per frame. |
| pointer | boolean | true | The cursor seeds new growth where it passes. |
| calm | number (0–1) | 0.8 | How strongly the pattern avoids the headline. |
| detail | "low" | "medium" | "high" | "medium" | Grid resolution: lower is lighter on the GPU. |
| poster | string | — | Image shown when WebGPU is unavailable. |
The same hero as a Web Component
Web Component · no framework
<sg-reaction-diffusion>
The same engine, driven by attributes. Its text is the page’s own DOM, slotted over the GPU layer.