---
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 `` / `index.css`:
```
@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):** `