Sitewright

Landscape towers

A dusk landscape where invented tower forms (tiered pagoda-like, minaret-like, stupa-like, lighthouse-like and stacked spire) build up from their foot; show one with `variant` or all five as an ensemble, mirrored in water.

What it is for

Hero or section backdrop for travel, culture or architecture pages (fills its parent, which should be positioned).

Use it

1 · site.json
"effects": { "components": ["landscape-towers"] }
or on the command line
node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --components landscape-towers
2 · import it
import { LandscapeTowers } from '@/components/fx/ui';

Files

  • components/fx/ui/LandscapeTowers.tsx
  • components/fx/ui/_tu-three-kit.ts
  • components/fx/ui/_tu-three-towers.ts
  • components/fx/ui/_tu-three-chips.tsx
  • components/fx/ui/_t1.ts
  • ui-landscape-towers.css styles

Source

Original to Sitewright. MIT licensed.

Credits and licences: third-party notices.

Accessibility

  • Keyboard. Components in the kit are written to be reached and used with the keyboard. Try it: press Tab inside the preview.
  • Reduced motion. With prefers-reduced-motion on, animation settles to its finished state at once.
  • Touch. Pointer-follow effects are skipped on touch screens; controls stay finger-sized.