Framelix 3D Studios demo
Framelix 3D Studios

A cinematic, pure-black 3D studio aesthetic with dramatic high-contrast visuals tailored for motion design agencies, video producers, and animation portfolios.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 14.0 KB · 1953 words
# CODING AI PROMPT — LANDING PAGE: "Framelix 3D Studios"

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code the complete Landing Page described below on the first attempt — fully functional, production-ready, with no TODOs, no stubs, and no follow-up questions.

**Objective:** Build a single-page marketing site for **Framelix 3D Studios**, a cinematic 3D motion-design studio. Aesthetic: 2024–2026 creative studio — pure black canvas, lavender accent, infinite marquee banner, two distinct video sections, Inter typography, and full Light + Dark theme support. Output category: Dark Tech & Cyber, executed as a cinematic creative studio.

---

## 0. THEME DEFINITION — "Framelix 3D Studios"

**0.1 Brand & Mood**
- Keywords: 3D, cinematic, motion studio, marquee banner, multiple videos, animated entrances, Inter font, pure black, lavender accent, ticket icon, video sections.
- **Language:** Write ALL user-facing copy in English (e.g., "Buy Now", "Explore", "Cinematic 3D, delivered frame by frame"). No Portuguese or non-English text anywhere in the UI, comments, class names, or file names.

**0.2 Color System** — map exactly into the CSS variables of §1.2:

| Token | Light Mode | Dark Mode |
|---|---|---|
| `--bg-primary` | `#EAEAEA` | `#000000` |
| `--bg-secondary` | `#FEFEFE` | `#0E0E12` |
| `--text-primary` | `#000000` | `#FFFFFF` |
| `--text-secondary` | `#6B7280` | `rgba(255,255,255,0.6)` |
| `--primary` (lavender accent) | `#A6A4FF` | `#A6A4FF` |
| `--secondary` | `#000000` | `#EAEAEA` |
| `--border-default` | `rgba(0,0,0,0.12)` | `rgba(255,255,255,0.14)` |

- Pure white `#FFFFFF` is reserved for dark-mode text and button surfaces only — never as a light-mode page background (light surfaces are `#EAEAEA` / `#FEFEFE`).
- **Marquee band:** background `#A6A4FF`, text `#000000` in BOTH themes (brand constant).
- **Primary buttons:** light mode → `#000000` fill + `#FFFFFF` text; dark mode → `#A6A4FF` fill + `#000000` text.
- **Shipping section:** dark mode → `#EAEAEA` background with `#000000` text (the deliberate light break in the black page); light mode → inverted to near-black `#0A0A0A` with `#FFFFFF` text, preserving its contrast-break role. Bottom corners rounded 40px in both themes.
- Enforce the light/dark pairing rule for every token in every theme: light backgrounds pair with dark text, dark backgrounds pair with light text.

**0.3 Typography & Logo**
- Google Font **Inter** (weights 400/500/600/700/800) via `<link>`, bound to `--font-base`. Headings: heavy weight, tight letter-spacing; body: 400/500.
- Logo: Inter wordmark + ticket icon. Dark mode: apply `filter: brightness(0) invert(1)` to the logo mark (renders it pure white). Light mode: apply `filter: brightness(0)` (renders it pure black). Drive this with a theme-scoped CSS class — never inline styles.

**0.4 Media Assets (two distinct videos)**
- **Hero video:** full-width cinematic 3D motion-design showreel — `object-fit: cover`, filling a hero container whose height is defined in CSS (e.g., `min-height: 85vh`), with `autoplay muted loop playsinline`. The video sits inside a positioned container that holds the absolute text overlays.
- **Shipping video:** square 800×800 3D product demo (rotating object or animated scene), centered inside the Shipping section, rounded corners, rendered with `controls`, capped at `min(800px, 100%)` with `aspect-ratio: 1 / 1`.
- No real assets were supplied: use royalty-free placeholder MP4 URLs from public CDNs (Mixkit, Pixabay, Coverr, or similar direct links) with `poster` images, clearly commented as placeholders. If a video fails to load, its poster or solid surface must remain visually intact. Provide a keyboard-accessible pause control for the hero video.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is **forbidden** anywhere in `index.html`.
- All design properties, layout rules, and states are targeted via class/ID selectors only.
- HTML stays semantic and style-agnostic — re-skinning the site must require editing CSS only, never the markup.

**1.2 CSS Variables & Theme Tokens**
- Define all tokens in `:root` (light) and override under a `.dark` class (plus a `@media (prefers-color-scheme: dark)` block guarded so saved preferences win): `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success` (light `#16A34A` / dark `#4ADE80`), `--text-error` (light `#DC2626` / dark `#F87171`), `--border-default`, `--border-error`, `--border-success`, `--radius-sm` (8px), `--radius-md` (16px), `--radius-lg` (40px — the Shipping section's bottom corners), `--shadow-sm`, `--shadow-md`, `--spacing-gap` (60px — marquee item gap), `--transition-fast` (150ms), `--transition-normal` (400ms), `--ease-standard` (`cubic-bezier(0.22, 1, 0.36, 1)`), `--z-dropdown` (1000), `--z-modal` (2000), `--z-toast` (3000), `--font-base` (`'Inter', sans-serif`).
- Apply the contrast pairing of §0.2 in every theme.

**1.3 Mandatory Dark Mode Support**
- Dark mode is a first-class theme. Persist the user's choice in `localStorage` (key: `framelix-theme`), falling back to `prefers-color-scheme` on first visit.
- Provide a visible toggle (sun/moon Material Symbols) with correct `aria-pressed` state and `aria-label="Toggle dark mode"`. Switching themes swaps CSS variables only — no HTML restructuring.
- Both themes must pass WCAG AA contrast; the hero video carries a gradient scrim in both themes so overlay text stays readable.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structure with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
- Mobile-first responsiveness: nav columns, feature rows, steps, pricing tiers, and footer columns stack into single columns on small viewports. No horizontal scrolling at any width — the marquee wrapper is `overflow: hidden` and videos are width-capped.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (Play CDN or build) with component classes defined via `@layer components` / `@apply` in `style.css`: `.btn`, `.card`, `.input-group`, `.marquee`, `.nav`, `.step`, `.faq-item`, `.modal`. Utilities and components must resolve to the CSS variables — no hardcoded hex values inside component classes, no arbitrary color utilities in markup.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Inter via Google Fonts `<link>`; icons via **Google Material Symbols** (variable font).
- The ticket mark uses the `confirmation_number` Material Symbol.
- Raw inline SVGs, icon fonts, and local icon files are forbidden. **Exception clause:** the source spec requests a ticket SVG — a single bespoke inline SVG is permitted for the ticket logo mark only if a custom glyph is essential; every other icon must remain a Material Symbol.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements** — `.btn` + `.btn--primary` / `.btn--ghost` / `.btn--danger`:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, Inter 600.
- **Hover:** brightness/shadow shift + `cursor: pointer`.
- **Focus:** distinct lavender ring via `box-shadow` using `--primary` for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading** (`aria-busy="true"`): blocks pointer events, prevents double-clicks, renders a CSS spinner without changing button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states tinted by `--text-success` / `--text-error`.
- Required instances: hero "Explore" (ghost over video) and "Buy Now" (primary — Shipping, Pricing, nav CTA).

**2.2 Card Component Requirements** — powers Features, How It Works steps, Testimonials, Pricing:
- **Default:** flex layout on `--bg-secondary`, 1px `--border-default`, `--radius-md`, `--shadow-sm`.
- **Hover:** elevation shift + `transform: translateY(-2px)`.
- **Focus-within:** lavender border when a child link/button receives focus.
- **Loading:** shimmer skeleton keyframes preserving layout height (no jumps).
- **Empty state:** centered Material Symbol + guidance text fallback.
- Pricing middle tier: `.card--featured` with lavender border, "Most Popular" badge, and desktop scale-up.

**2.3 Form & Input Requirements** — Final CTA email capture:
- `.input-group`: flex container wrapping `<label>`, `<input type="email">`, and a dedicated error feedback container (`aria-live="polite"`).
- **States:** empty, focused (lavender outline ring), filled, valid (success border + `check_circle` icon), invalid (error border + `error` icon + message in `--text-error`), disabled, read-only.
- Validate in `script.js` with inline per-field messages; never rely on color alone — pair icon + text.

**2.4 Modal / Popup Requirements** — "Buy Now" order modal:
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions (`--transition-normal`).
- **UX:** centered flex overlay (`align-items: center`), blurred dark backdrop, Material Symbol `close` button, keyboard focus trapping, close via `Esc` and backdrop click, focus returns to the trigger; `role="dialog"`, `aria-modal="true"`.
- Status changes announced via `aria-live`.

**2.5 Page Section Blueprint** — build exactly these sections, in order:
1. **Navbar (sticky):** three columns — left and right columns of stacked links (e.g., Work / Studio / Services and Pricing / FAQ / Contact) with the ticket logo centered between them; backdrop-blur over the hero. Mobile: collapses to a `menu` Material Symbol button + animated slide-down panel (`aria-expanded`, keyboard operable). Theme toggle lives here.
2. **Hero:** full-width cinematic showreel video (§0.4) with absolute-positioned text overlays — eyebrow ("3D Motion Studio"), H1, subline, "Explore" ghost + "Buy Now" primary buttons. Overlays animate in with fade+slide (0.8s, staggered ~120ms). Gradient scrim guarantees contrast in both themes.
3. **Marquee banner:** full-width band, `#A6A4FF` background, `#000000` uppercase Inter 700 items separated by ticket icons, `gap: 60px` (`--spacing-gap`). Track content duplicated for a seamless loop; animation `translateX(0) → translateX(-50%)`, **20s linear infinite**; wrapper `overflow: hidden`; duplicate track `aria-hidden="true"`; pauses on hover; disabled under `prefers-reduced-motion`.
4. **Features:** 3 cards (e.g., Cinematic Renders, Motion Systems, VFX & Compositing), each with a Material Symbol, title, and real copy; fade+slide entrance on scroll.
5. **How It Works:** 3 numbered steps in a flex row (stacked on mobile) with a connecting line and arrow symbols.
6. **Shipping showcase:** section per §0.2 (contrast break, `border-radius: 0 0 40px 40px`), centered 800×800 square video (§0.4) with rounded corners, headline, supporting copy, and a "Buy Now" button.
7. **Testimonials:** 3 quote cards with avatar initials, name, role, and five `star` Material Symbols.
8. **Pricing:** 3 tiers (e.g., Starter / Studio / Enterprise) with feature lists and "Buy Now" buttons that open the modal (§2.4); featured middle tier.
9. **FAQ:** accessible accordion — `<details>`/`<summary>` or button + region with `aria-expanded`/`aria-controls`; animated open/close; keyboard operable; 5–6 real questions (process, revisions, deliverable formats, licensing, pricing).
10. **Final CTA:** high-impact panel with headline, the email `.input-group` (§2.3), and a submit button with loading → success states plus a toast confirmation (`--z-toast`).
11. **Footer:** secondary links in stacked columns (Studio, Resources, Legal), text-based social links, copyright, and a back-to-top control (`arrow_upward`).

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` typography, standard breakpoints, zero horizontal overflow anywhere (marquee and videos included).
- **Smooth animations:** every state change transitions with `var(--transition-normal)`. Entrance choreography is Framer-Motion-style fade+slide — opacity 0→1, `translateY(24px)` → 0, **0.8s**, `--ease-standard`, staggered — implemented as CSS classes toggled by an `IntersectionObserver` in `script.js`. **Exception clause:** the source spec references Framer Motion (a React library); do not introduce React — replicate its fade+slide timing in vanilla CSS/JS exactly as specified here.
- **Reduced motion:** `prefers-reduced-motion` disables the marquee animation, entrance slides, and hero video autoplay; all content remains fully visible and reachable.
- **Accessibility:** WCAG AA contrast in both themes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`); skip-to-content link; correct ARIA roles/labels on the theme toggle, mobile menu, accordion, and modal; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, modal status, and CTA feedback. Never communicate state by color alone.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Destructive actions:** any destructive control (e.g., "Clear form") uses `.btn--danger` with `--text-error` / `--border-error` styling, visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File structure:** separate `index.html`, `style.css`, and `script.js` — complete and production-ready. No `style="..."` attributes; no inline `<script>` blocks beyond the single deferred entry point (`<script src="script.js" defer></script>`).
- **Naming convention:** BEM everywhere — `.hero__title`, `.marquee__track`, `.card--featured`, `.btn--primary`, `.input-group__error`, `.faq__item`. Never mix conventions; all names in English/ASCII.
- **Copy:** write real, on-brand English marketing copy for every section — no lorem ipsum (the theme and section list fully specify the content). Placeholder video URLs are the only permitted placeholders.
- **First-attempt completeness:** output the entire build in one response — all 11 sections, both themes, all component states, all interactions. No TODOs, no stubs, no follow-up questions.