| name | layered-depth |
| description | Use this plugin when the user wants a cinematic, layered-parallax architecture-studio landing page (brand 'Qelora'): fullscreen background video, a giant center brand wordmark behind a parallax sculpture slab, an animated bird video state machine, frosted-glass nav pills and bottom info panels, and a second full-viewport video section with a centered editorial headline. Invoke for 'layered depth', 'architecture studio landing', 'parallax hero with video', 'Qelora', or when the user references the Layered Depth motionsites template. |
| version | 0.1.0 |
| od | {"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}} |
Layered Depth โ Architecture Studio Landing (Qelora)
Produce a cinematic, depth-layered landing page for an architecture studio called Qelora, built on stacked z-index layers (background video โ warm overlay โ animated birds โ giant brand wordmark โ parallax sculpture slab โ frosted nav โ frosted info panels) plus a second full-viewport video section with a centered editorial headline.
A complete, rendered reference implementation ships beside this skill at example.html โ start from it. Copy example.html, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, layer stacking, parallax math, bird state machine, and 768px responsive behavior described below.
This is the authoritative build brief. Follow it exactly โ the named colors, fonts, asset URLs, z-indexes, and parallax constants are locked.
Stack
- Default output: a single self-contained HTML file (the
example.html seed). It already includes everything inline.
- If the user explicitly asks for a React + Vite + TypeScript + Tailwind project, port the seed faithfully into
Hero.tsx + Section2.tsx (mounted by App.tsx โ main.tsx in StrictMode, no routing). Tailwind is used only for base reset (@tailwind base/components/utilities); every element is styled with inline styles, no utility classes in JSX. Dependencies are only react, react-dom, lucide-react (lucide is declared but the page's icons are all inline SVG and lucide is not actually rendered). Do not change the design while porting.
Fonts (Zimula Trial โ locked)
Load all three in <head> / index.css:
<link href="https://db.onlinewebfonts.com/c/076f8c5b3b67616658dd1e4e9bac62ec?family=Zimula+Trial+Med" rel="stylesheet">
<link href="https://db.onlinewebfonts.com/c/08d8ca53f66ab5b48659912fa0136b78?family=Zimula+Trial+Bd" rel="stylesheet">
@import url('https://db.onlinewebfonts.com/c/46024824a3dd3309c3a7f46f4f1283ba?family=Zimula+Trial+Reg');
- Body / default:
'Zimula Trial Med', sans-serif (primary weight, used everywhere).
- Bold / logo / hero wordmark:
'Zimula Trial Bd', sans-serif.
Reg is imported and available but Med is the primary weight.
Global CSS (index.css)
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Zimula Trial Med', sans-serif; background: #0e0c0a; overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0e0c0a; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
Color palette โ locked
- Dark background:
#0e0c0a
- Primary text:
#241f21, #282425, #2a2420
- White:
#fff
- Dark accent:
#100e0c
- Warm transparent overlays:
rgba(235,230,218,0.12) (hero), rgba(242,238,230,0.38) (section 2)
- Frosted glass backgrounds:
rgba(248,245,240,0.72), 0.88, 0.92, 0.96
Assets (Cloudinary + Pexels โ keep these remote)
These are stable CDN media; keep them as remote URLs (do not try to inline the videos). The Cloudinary background videos / bird webm clips and the Pexels CTA photo stay as URLs.
Videos:
- Hero background:
https://plugin-assets.open-design.ai/plugins/layered-depth/bg-video_xsmysw-f9ba1c.mp4
- Bird enter:
https://plugin-assets.open-design.ai/plugins/layered-depth/bird-entrada_e72qt7-102269.webm
- Bird idle 1:
https://plugin-assets.open-design.ai/plugins/layered-depth/bird-idle_fzjami-a7d50b.webm
- Bird idle 2:
https://plugin-assets.open-design.ai/plugins/layered-depth/bird-idle2_rajmgo-a2bfbb.webm
- Bird leave:
https://plugin-assets.open-design.ai/plugins/layered-depth/bird-saida_ifroz1-4ad3cb.webm
- Section 2 background:
https://plugin-assets.open-design.ai/plugins/layered-depth/bg-2-video_sgbpqt-cdc7da.mp4
Images:
- Q logo (declared, unused):
https://plugin-assets.open-design.ai/plugins/layered-depth/q-logo_isvugc-be3611.webp
- Center sculpture / slab:
https://plugin-assets.open-design.ai/plugins/layered-depth/slab_v1_kb4vqk-eb36b8.webp
- CTA card photo (Pexels):
https://plugin-assets.open-design.ai/plugins/layered-depth/pexels-photo-3184465-a44809.webp
Do not swap these CDN URLs for other hosts and do not introduce remote avatar hosts (i.pravatar.cc, dicebear, etc.) โ there are no avatars in this template.
Section 1 โ Hero
Container: position: relative; width: 100%; min-height: 100vh; overflow: visible; font-family: 'Zimula Trial Med'.
Responsive breakpoint: isMobile = window.innerWidth < 768, checked on mount and resize.
Stack the layers by z-index exactly:
- Layer 1 โ Background video (z-index 0):
<video autoplay muted loop playsinline>, position:absolute; inset:0; width:100%; height:100vh; object-fit:cover, source = hero bg mp4.
- Layer 2 โ Warm overlay (z-index 1): div,
background: rgba(235,230,218,0.12); height:100vh; pointer-events:none.
- Layer 3 โ Bird animation system (z-index 8): container
position:absolute; top:0; left:0; width:100%; height:100vh; pointer-events:none; aria-hidden. Four <video> elements (enter, idle1, idle2, leave) toggled via display. Desktop: each position:absolute; inset:0; width:100%; height:100%; object-fit:cover. Mobile: each position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto. State machine 'enter'|'idle1'|'idle2'|'leave'|'hidden': on load play enter; enter ended โ idle1; idle1 ended โ idle2; idle2 ended โ idle1 (infinite loop); scroll past 10px โ pause/reset enter+idles, play leave; scroll back below 10px โ pause/reset leave, play enter again. Use both state and a ref to avoid stale closures in the scroll handler. Preload all four with .load() on mount. The playVideo helper sets currentTime=0, checks readyState>=2, then plays (or waits for a canplay event).
- Layer 4 โ Center brand text "Qelora" (z-index 5): container fills
100vh, flex centered, pointer-events:none. Text Qelora in 'Zimula Trial Bd', font-size mobile 26vw / desktop 22vw, letter-spacing:-0.05em; color:#241f21; line-height:1; margin-bottom: mobile 8vh / desktop 12vh.
- Layer 5 โ Sculpture slab (z-index 5):
<img> position:absolute; top:50%; left:50%, transform: translateX(-50%) translateY(${-heroScroll * 0.3}px) โ parallax that moves UP as the user scrolls down. Width mobile 220vw / desktop ; .
Section 2
Container: position:relative; width:100%; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; font-family:'Zimula Trial Med'.
- Layer 1 โ Background video (z-index 0):
<video autoplay muted loop playsinline>, position:absolute; inset:0; width:100%; height:100%; object-fit:cover, source = section 2 bg mp4.
- Layer 2 โ Warm overlay (z-index 1):
background:rgba(242,238,230,0.38); position:absolute; inset:0; pointer-events:none.
- Layer 3 โ Center headline (z-index 2): absolutely positioned
inset:0, flex centered, pointer-events:none; text-align:center; padding:0 24px. Text "What stands the\ntest of time is all\nthat guides the\nwork." using <br> tags. font-size:clamp(32px,5.5vw,80px); line-height:1.18; color:#2a2420; max-width:780px; letter-spacing:-0.025em; font-weight:400.
- Layer 4 โ Bottom element (z-index 2):
position:absolute; bottom:clamp(24px,4vh,48px), full width, flex column centered, padding:0 24px. Vertical line width:1px; height:56px; background:rgba(42,36,32,0.25). Below (margin-top:22px), flex column centered gap:14px: a 24ร28px outline map-pin SVG (stroke:#2a2420; stroke-width:1.4), then subtext "Civic bodies and private clients trust us to shape resilient communities and purposeful places." โ font-size:clamp(11px,1.4vw,13px); color:#2a2420; letter-spacing:0.04em; line-height:1.6; max-width:340px; opacity:0.75.
Key behaviors โ hard
- Bird state machine: enter โ idle1 โ idle2 loop; scroll triggers leave; scroll back triggers re-enter. Driven entirely by native
<video> ended/play events + scroll, no animation library. In the vanilla seed this is a mousemove/scroll-free pure state machine; in React use refs to avoid stale closures.
- Parallax (passive scroll listener writing inline style): sculpture
translateY(-scrollY * 0.3) (moves up); bottom panels bottom = offset + scrollY * 0.5 (pushes down). Map any useScroll/useTransform down to a single passive scroll listener that writes inline transform/bottom.
- Responsive at 768px: nav collapses to hamburger; panels stack vertically; bird videos switch from cover-fill to
width:100%/height:auto/vertically-centered; sculpture grows 160vw โ 220vw; brand text grows 22vw โ 26vw.
- All styling is inline โ no CSS utility classes in JSX, no Tailwind utilities on elements (Tailwind base reset only).
- No third-party animation libraries โ all motion is native video playback + scroll-driven inline style changes.
Color rules โ hard
Stay in the warm dark-stone palette above. Background is always #0e0c0a; text is the #241f21 / #282425 / #2a2420 warm-ink family; frosted panels use the rgba(248,245,240, โฆ) set; overlays are the warm rgba(235,230,218,0.12) / rgba(242,238,230,0.38) pair. Do not introduce a cool/blue/purple accent โ the whole piece is monochrome warm stone with white only inside the CTA card.
