Sitewright

Living green hero

A botanical landing page whose first screen is one object: a glass terrarium with a miniature moss forest inside (refracting rim, condensation, running drops, chrome base) centred between a split serif headline, with hairline callouts, drifting spores, pointer parallax and a liquid-metal CTA.

What it is for

organic product, skincare, wellness or garden brand landing page whose hero is one hero object

Below: a scroll-revealed story, a filterable and sortable bento shelf with a working basket and checkout, a self-drawing vine timeline and a newsletter form.

Add it to a site

1 · site.json
"effects": { "templates": ["hero-living-green"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --templates hero-living-green
2 · import it
import HeroLivingGreen from '@/components/fx/tpl/HeroLivingGreen';

Files

  • components/fx/tpl/HeroLivingGreen.tsx
  • components/fx/tpl/_ha-kit.tsx
  • components/fx/tpl/_ha-green-gl.tsx
  • components/fx/tpl/_ha-green-art.tsx
  • components/fx/tpl/_ha-green-cart.tsx
  • components/fx/tpl/_ha-green-jar.tsx
  • components/fx/tpl/_ha-green-shelf.tsx
  • components/fx/tpl/_dash.tsx
  • components/fx/tpl/../ui/MossForestWorld.tsx
  • components/fx/tpl/../ui/_tu-three-kit.ts
  • components/fx/tpl/../ui/_tu-three-forest.ts
  • components/fx/tpl/../ui/_tu-three-chips.tsx
  • components/fx/tpl/../ui/LiquidMetalButton.tsx
  • components/fx/tpl/../ui/_tu-liquid-metal.ts
  • components/fx/tpl/../ui/_tu-ui-kit.ts
  • components/fx/tpl/../ui/GradualBlur.tsx
  • components/fx/tpl/../ui/_motion-a.tsx
  • components/fx/tpl/../ui/MagicBento.tsx
  • components/fx/tpl/../ui/ScrollReveal.tsx
  • components/fx/tpl/../ui/_text-b.ts
  • components/fx/tpl/../ui/Grainient.tsx
  • components/fx/tpl/../ui/_bg-c-demo.tsx
  • components/fx/tpl/../ui/_inputs-lensmap.ts
  • components/fx/tpl/../ui/_t1.ts
  • components/fx/tpl/../ui/_t2.ts
  • tpl-heroes-a.css styles
  • ui-moss-forest-world.css styles
  • ui-liquid-metal-button.css styles
  • ui-gradual-blur.css styles
  • ui-magic-bento.css styles
  • ui-scroll-reveal.css styles
  • ui-grainient.css styles
  • tpl-hero-living-green.css styles

About it

Original to Sitewright. MIT licensed. Demo data is fictional and deterministic. Every control on the page works, so try it before you take it.

It answers its own width rather than the screen's, so the tablet and phone buttons show the real responsive behaviour. Templates are not components: they are chosen with templates, not components.