Sitewright

Night temple hero

Cinematic full-bleed landing page for a lantern-lit mountain retreat: a monumental night temple scene (parallax ridges, mist, rain, a lit pagoda, a pointer-carried lantern that really lights the title), two lines of widely tracked display type, one call to action, then a scroll-linked night-to-dawn journey with a split-flap clock, rooms with a validated booking dialog, rituals and a letters form.

What it is for

travel, hospitality or event landing page with an atmospheric night hero

Add it to a site

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

Files

  • components/fx/tpl/HeroNightTemple.tsx
  • components/fx/tpl/_ha-kit.tsx
  • components/fx/tpl/_ha-night.tsx
  • components/fx/tpl/_ha-night-book.tsx
  • components/fx/tpl/_dash.tsx
  • components/fx/tpl/../ui/NightTempleScene.tsx
  • components/fx/tpl/../ui/_tu-three-kit.ts
  • components/fx/tpl/../ui/_tu-three-temple.ts
  • components/fx/tpl/../ui/_tu-three-towers.ts
  • components/fx/tpl/../ui/_t1.ts
  • components/fx/tpl/../ui/SplitFlapText.tsx
  • components/fx/tpl/../ui/ScrollFloat.tsx
  • components/fx/tpl/../ui/ScrollReveal.tsx
  • components/fx/tpl/../ui/_text-b.ts
  • components/fx/tpl/../ui/_t2.ts
  • components/fx/tpl/../ui/GlareHover.tsx
  • components/fx/tpl/../ui/LightRays.tsx
  • components/fx/tpl/../ui/_bg-a.tsx
  • components/fx/tpl/../ui/Grainient.tsx
  • components/fx/tpl/../ui/_bg-c-demo.tsx
  • tpl-heroes-a.css styles
  • ui-night-temple-scene.css styles
  • ui-split-flap-text.css styles
  • ui-scroll-float.css styles
  • ui-scroll-reveal.css styles
  • ui-glare-hover.css styles
  • ui-light-rays.css styles
  • ui-grainient.css styles
  • tpl-hero-night-temple.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.