CrazyGLLiving Brand Seed
Your logo grows from delicate organic contour lines — like roots reaching across paper — then settles into its solid form beside the heading. Warm cream backdrop, drifting amber pollen, and a cursor-driven breeze keep the scene quietly alive.
Usage
import LivingBrandSeed from '@crazygl/hero-living-brand-seed';
export default function Page() {
return (
<LivingBrandSeed
logo="https://example.com/logo.svg"
heading={"Grow something\nworth keeping."}
growDuration={3.5}
pollenColor="#f5c97a"
/>
);
}Customise
- Logo —
logo(SVG/PNG silhouette stroked-then-filled, or a GLB/GLTF scaled from a seed),logoColor(stroke + fill tint),logoSize,useGlbMaterials. - Growth —
growDuration(seed-to-settled time; the 70/30 stroke-to-fill split holds across the range),replayInterval(seconds between replays; 0 = grow once). - Pollen —
pollenCount,pollenColor,pollenSpeed,pollenSize,windStrength(how hard the cursor blows the grains sideways). - Layout & motion —
layout(centered / content-left / content-right),pointerParallax(logo tilt + bob toward the cursor). - Background & type —
transparentBackground,bgTop/bgBottom,headingFontFamily.
Best for
- Wellness, meditation, and slow-living brands
- Sustainability and hand-made / artisanal sites
- Education and coaching platforms
- Anything that wants to feel grown rather than rendered
One command, zero config.
npm install @crazygl/hero-living-brand-seedImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import LivingBrandSeed from '@crazygl/hero-living-brand-seed';
export default function Landing() {
return (
<LivingBrandSeed />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import LivingBrandSeed from '@crazygl/hero-living-brand-seed';
export default function Page() {
return (
<section>
<LivingBrandSeed
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
