Viktor Oddy

❤️‍🔥 This is one of the premium prompt, and is available at: motionsites.ai/?prompt=immers…

Having fun with Seedance 2 + GPT Image 2 Prompt ↓

❤️‍🔥 Access ALL prompts from this video for stunning AI websites in one click: motionsites.ai

NEW Kimi K3 Creates Insane Web Designs! ❤️‍🔥Just Recorded a 13 min Tutorial on how to Create an Award-Winning Website with Kimi K3

Design/AI tools I keep coming back to. Save this 👇 Need a website? Use @GoogleAIStudio Need a Logo? Use @ChatGPTapp Need a web app? Use @Lovable Need prompts? Use @motionsitesai Need a video? Use @higgsfield Need to build? Use @claudeai You can start a one-person online business in 2026 and make $1M/year

Access ALL prompts for stunning animated websites in one click: motionsites.ai > Build a single-page landing page for a brand called **"Aethera"** (a fintech/AI company for lending). Use **React + TypeScript + Vite + Tailwind CSS + lucide-react**. The page has a white background (`#fff`), no scrolling animations -- just a clean, minimal, editorial design. > > ### Fonts > - **Heading/serif font:** "P22 Mackinac W01 Book" loaded from `db.onlinewebfonts.com/c/9d4d074c9335…` > - **Body/sans font:** "Inter" (weights 300, 400, 500, 600) from Google Fonts > - Configure Tailwind: `fontFamily.sans = ['Inter', 'sans-serif']`, `fontFamily.serif = ['P22 Mackinac W01 Book', 'Georgia', 'serif']` > > ### Page Title > `` > > ### Background Video It has to be centered vertically on the page > Use this **exact** CloudFront video URL: > ``` > d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… > ``` > The video is positioned **absolutely** behind the hero using: top: '50%', transform: 'translateY(-50%)' and CSS filter `brightness(1) contrast(1.2)`. It uses `object-contain`, is muted, playsInline, preload="auto". It plays once on load and pauses when ended (no looping, no boomerang reversal -- just plays forward once and stops). > > ### Navbar > - `relative z-20`, max-width `max-w-7xl`, centered, `px-8 py-6`, flex between. > - **Logo (left):** Text "Aethera" with a superscript registered mark -- `font-serif text-3xl tracking-tight text-[#000000]` with `<sup>®</sup>` > - **Navigation links (center, hidden on mobile `hidden md:flex`):** "Home" (active, `text-[#000000]`), "Studio", "About", "Journal", "Reach Us" (inactive, `text-[#6F6F6F]`). Each is `text-sm` with hover to black. > - **CTA button (right):** "Begin Journey" -- `rounded-full px-6 py-2.5 text-sm bg-[#000000] text-white` with `hover:scale-[1.03] transition-transform duration-200`. > > ### Hero Section > - Wrapper: `relative flex flex-col items-center` > - Inner container: `relative w-full min-h-[60vh] sm:min-h-[65vh] md:min-h-[70vh] flex flex-col items-center` > - Content container: `relative z-10 flex flex-col items-center text-center pt-16 sm:pt-20 md:pt-28 px-4 sm:px-6` with inline style `marginTop: '-70px'` > - **Headline:** `font-serif text-4xl sm:text-5xl md:text-7xl lg:text-8xl leading-[1.1] tracking-tighter text-[#191919] font-normal` -- text is "Forge trust," on line 1, "drive results." on line 2 (using `
`) > - **Subtext:** `mt-5 sm:mt-6 md:mt-8 max-w-sm sm:max-w-md text-sm md:text-base text-[#191919]/70 leading-relaxed px-2` -- "Intelligent AI agents designed for today's lending companies -- software that manages every borrower touchpoint via phone, text, and email." > - **Button:** "Get Started" -- `mt-6 sm:mt-8 md:mt-10 px-6 sm:px-8 py-3 sm:py-3.5 bg-[#191919] text-white text-sm font-medium rounded-lg hover:bg-[#191919]/90 transition-colors duration-200` > > ### Info Box (overlapping below hero) > - Container: `relative z-10 w-full max-w-7xl px-4 sm:px-8 -mt-8 sm:-mt-12 md:-mt-16` > - Box: `bg-white/90 backdrop-blur-sm border border-gray-200 pt-8 sm:pt-12 md:pt-16 px-5 sm:px-8 md:px-12 pb-0 shadow-sm flex flex-col overflow-hidden` > - **Row 1 (two-column grid `grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 md:gap-16`):** > - Left: Label `text-[11px] uppercase tracking-[0.2em] text-[#191919]/50 font-medium` -- "How do we help?". Heading `mt-3 text-2xl sm:text-3xl md:text-4xl font-normal leading-tight tracking-tight text-[#191919] font-serif` -- "Dialogues that\nspark progress" (line break hidden on mobile `hidden sm:block`) > - Right: `flex items-end` with paragraph `text-sm md:text-[15px] text-[#191919]/70 leading-relaxed` -- "Conversational AI made for compliant financial organizations. Agents that carry a real dialogue, tie into the tools you use, and document their actions." > - **Divider:** `mt-6 sm:mt-8 md:mt-10 h-px bg-gray-200 w-full` > - **Row 2 (three feature pills, `grid-cols-1 sm:grid-cols-3 gap-2 sm:gap-3`, `mt-6 sm:mt-8 md:mt-10`):** > - Each pill: `group flex items-center justify-between bg-[#F4F3F3] px-4 sm:px-6 py-3.5 sm:py-4 hover:bg-[#eaeaea] transition-all duration-200 cursor-pointer` > - Content: Number (`text-[#191919]/40`) + separator (`/` in `text-[#191919]/30 mx-2`) + label (`font-medium`) > - Items: "01 / Multichannel", "02 / Integrated", "03 / Auditable" > - Right icon: `ArrowRight` from lucide-react, `w-4 h-4 text-gray-400` with `group-hover:text-gray-700 group-hover:translate-x-0.5 transition-all duration-200` > > ### Global CSS (index.css) > ```css > @tailwind base; > @tailwind components; > @tailwind utilities; > > * { > box-sizing: border-box; > } > > body { > font-family: 'Inter', sans-serif; > -webkit-font-smoothing: antialiased; > -moz-osx-font-smoothing: grayscale; > } > ``` > > ### Key Behaviors > - The video plays forward exactly once, then pauses. No loop, no reverse. > - The page is fully responsive with breakpoints at sm, md, lg. > - Minimal hover animations: button scale, arrow translate, color transitions. > - No additional sections below the info box. ---

Claude + Fable. and now anyone can achieve the same results. Prompt below 👇

Access ALL prompts for stunning animated websites in one click: motionsites.ai Prompt: Build a full-screen animated 404 error page for a children's brand called "TinyTrails" using React, Tailwind CSS, and Lucide React icons. The page must be a single `App.tsx` component. Use the Inter font (weights 400–900) loaded from Google Fonts. The page is a single viewport-height screen with no scrolling. --- **LAYOUT & BACKGROUND:** - The full page is `w-full h-screen overflow-hidden flex flex-col` with a CSS linear gradient background from `#FF8233` (top) to `#FDAC55` (bottom). --- **BACKGROUND "404" TEXT EFFECT:** - Behind everything, centered in the viewport, render the text "404" in white (`#FFFFFF`), `font-black`, `leading-none`, `tracking-tighter`, `whitespace-nowrap`. - Font size: `clamp(200px, 48vw, 800px)`. - The text is scaled horizontally by `1.15` and vertically dynamically: on mount (and resize), measure the text element's `offsetHeight`, divide `window.innerHeight` by that height, and multiply by `1.4` to get the Y scale. Apply via `transform: scale(1.15, ${scaleY * 1.4})`. - Over the "404" text (same centered container), render a white (`#FFFFFF`) oval: a `div` with `rounded-full`, height `h-[22vh] sm:h-[26vh] md:h-[50vh]`, width `clamp(120px, 20vw, 400px)`, scaled vertically by the same dynamic `scaleY` value with `transformOrigin: center`. - The entire background layer (text + oval) is wrapped in a container with `opacity: 0.8` and a CSS mask that fades to transparent at the bottom: `mask-image: linear-gradient(to bottom, black 40%, transparent 95%)` (with `-webkit-mask-image` for Safari). - This layer is `absolute inset-0 pointer-events-none`. --- **NAVIGATION BAR:** - `relative z-20`, flex row, items centered, `justify-between`, padding `px-4 sm:px-6 md:px-12 py-4 sm:py-5`. - **Logo (left):** A 2x2 grid of white circles (`grid-cols-2 gap-0.5`), each circle `w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white rounded-full`. Next to it, the text "TinyTrails" in `text-white font-bold text-lg sm:text-xl ml-1`. - **Desktop nav links (center/right):** Hidden on mobile (`hidden md:flex`), a row of pill buttons with `gap-1`. Items: "About Us", "Programs", "Reviews", "FAQ", "Contacts". Each is an `` with `px-4 py-1.5 text-sm font-medium rounded-full bg-white` and text color `#F16524`, with `hover:opacity-90 transition-colors`. - **Menu button (right):** A pill button with `px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-white` and background color `#F16524`. Contains a Lucide `Menu` icon (`w-4 h-4`) and the text "Menu" (`text-sm font-medium hidden sm:inline`). Has `hover:opacity-90 transition-colors`. --- **MOBILE MENU OVERLAY:** - Fixed fullscreen (`fixed inset-0 z-50`), with visibility toggled. Transition: `duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`. - **Backdrop:** `absolute inset-0 bg-black/40 backdrop-blur-sm`, fades in/out with `opacity` transition over 500ms. Clicking it closes the menu. - **Panel:** Slides in from right. `absolute top-0 right-0 h-full w-full sm:w-[380px]`, translates between `translate-x-full` (closed) and `translate-x-0` (open). Background: `linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%)`. - **Panel header:** Same logo as nav (2x2 white dots + "TinyTrails" bold white text). Close button: `w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30` with Lucide `X` icon (`w-5 h-5`). - **Menu items:** Staggered animation. Each item is `px-6 py-4 text-lg font-semibold text-white rounded-2xl bg-white/10 hover:bg-white/20 transition-all duration-300`. When open: `opacity-100 translate-y-0`; when closed: `opacity-0 translate-y-4`. Transition delay per item: `150 + i * 60`ms when opening, `0ms` when closing. - **Bottom CTA:** Absolutely positioned at bottom (`absolute bottom-0 left-0 right-0 p-6`). A pill link: `w-full py-4 rounded-full bg-white font-semibold text-base` with text color `#F16524`, `hover:scale-[1.02]`. Contains Lucide `ArrowLeft` icon + "Back to Home". Fades in with 450ms delay when opening. - Body scroll is locked (`overflow: hidden`) when menu is open. --- **CENTER VIDEO:** - An absolutely positioned container (`absolute inset-0 flex items-center justify-center pointer-events-none`) with `margin-top: calc(-6vh - 40px)` to shift it upward. - Inside, a responsive container: `w-[120vw] h-[85vh] sm:w-[70vw] sm:h-[70vh] md:w-[62vw] md:h-[78vh]`. - Contains a `

❤️‍🔥 GPT 5.6 Sol Prompt below ↓

❤️‍🔥 Access ALL prompts from this video for stunning AI websites in one click: motionsites.ai

❤️‍🔥Ok Grok 4.5 is the BEST It NOW builds 3D Animated Websites on Autopilot. You pretty much get an AI designer. Worth a 12 min watch.

❤️‍🔥 This Premium prompt is available at motionsites.ai

Fable 5 + Claude Code 😮‍💨 Prompt ↓

Access Full Prompt for this website as well as UNLIMITED prompts in one click at motionsites.ai Copy and use this prompt verbatim: ```text Recreate the complete VEX landing page exactly as specified below. Build it as a single responsive page using: - React 19 - TypeScript - Tailwind CSS v4 - Vite or Vinext - No component libraries - No animation libraries - No icon packages - React state, setTimeout, and IntersectionObserver for animations The page must be fully responsive and preserve all copy, capitalization, punctuation, spacing, video URLs, animation timing, and visual treatments. ================================================== 1. GLOBAL DESIGN SYSTEM ================================================== Color scheme: - Page background: #000000 - Primary text: #ffffff - Secondary text: gray-300 or rgba(255,255,255,0.55) - Card background: #0a0a0a - Borders: rgba(255,255,255,0.08–0.15) - Atmospheric glow: #64748b - Do not introduce purple, indigo, bright blue, lime, or other brand colors. Global page wrapper:

Enable smooth scrolling. Use semantic sections and accessible navigation labels. Decorative videos and elements should use aria-hidden="true". ================================================== 2. FONT ================================================== Use Inter globally. Add these tags to the document : fonts.googleapis.com" /> fonts.gstatic.com" crossorigin /> fonts.googleapis.com/css2?family=In…" rel="stylesheet" /> Tailwind v4 theme: theme inline { --font-sans: "Inter", sans-serif; } Tailwind config: import type { Config } from "tailwindcss"; export default { theme: { extend: { fontFamily: { sans: ["Inter", "sans-serif"], }, }, }, } satisfies Config; Global body styles: body { color: #fff; background: #000; font-family: "Inter", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } Use Georgia only for the italic word “move” and the Story value words “Capital,” “Craft,” and “Conviction.” ================================================== 3. EXACT VIDEO URLS ================================================== Hero and Story masked video: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… Center pillar-card video: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… “How we work” background video: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… Final CTA/footer background video: d8j0ntlcm91z4.cloudfront.net/user_38xzZboKV… Every video must use: - autoPlay - loop - muted - playsInline - object-cover - aria-hidden="true" ================================================== 4. REUSABLE ANIMATIONS ================================================== FadeIn component: Create a React wrapper with these props: - children - className, default "" - delay, default 0 - duration, default 1000 It begins at opacity: 0. Use useEffect and window.setTimeout to change a visible state to true after the configured delay. Render: className={`transition-opacity ${ visible ? "opacity-100" : "opacity-0" } ${className}`} Set: style={{ transitionDuration: `${duration}ms` }} AnimatedHeading component: - Accept a text string. - Split it by "\n" into lines. - Split each line into characters. - Render every line as: - Render each character in an inline-block span. - Replace spaces with "\u00a0". - Initial character state: opacity: 0 transform: translateX(-18px) - Visible state: opacity: 1 transform: translateX(0) - Character transition: 500ms, ease-out - charDelay: 30ms - Start the entire animation after 200ms. - Character delay formula: lineIndex * line.length * 30 + charIndex * 30 Heading classes: mb-4 text-4xl font-normal text-white md:text-5xl lg:text-6xl xl:text-7xl Inline style: letterSpacing: "-0.04em" Reveal component: Use IntersectionObserver instead of an animation dependency. - threshold: 0.16 - Animate only once. - Disconnect the observer after the element enters. - Hidden state: opacity-0 translate-y-8 - Visible state: opacity-100 translate-y-0 - Transition: transition-[opacity,transform] duration-1000 ease-out Reduced motion: media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } ================================================== 5. LIQUID GLASS STYLE ================================================== Use this exact shared liquid-glass CSS: .liquid-glass { background: rgba(0, 0, 0, 0.4); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.3) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } All content inside liquid-glass elements must sit above the ::before layer using position: relative and z-index: 10 when needed. ================================================== 6. SECTION ONE — HERO ================================================== Section wrapper: relative flex min-h-[100svh] flex-col overflow-hidden Place the hero video absolutely behind everything: absolute inset-0 h-full w-full object-cover Important: Do not place any dark overlay, gradient, or dimming layer over this hero video. It must render raw. Navbar: Outer wrapper: relative z-10 px-6 pt-6 md:px-12 lg:px-16 Navbar bar: liquid-glass flex items-center justify-between rounded-xl px-4 py-2 Left logo: - Text: “VEX” - Link to "#" - Classes: relative z-10 text-2xl font-semibold tracking-tight - aria-label: “VEX home” Center navigation: - Hidden below md - Classes: relative z-10 hidden items-center gap-8 md:flex - Links: Story → #story Investing → #investing Building → #building Advisory → #advisory - Link classes: text-sm transition-colors hover:text-gray-300 Right button: - Text: “Start a Chat” - href="#chat" - Classes: relative z-10 rounded-lg bg-white px-6 py-2 text-sm font-medium text-black transition-colors hover:bg-gray-100 Hero content wrapper: relative z-10 flex flex-1 flex-col justify-end px-6 pb-12 md:px-12 lg:px-16 lg:pb-16 Inner responsive layout: lg:grid lg:grid-cols-2 lg:items-end Left content: Animated heading with this exact text and line break: Shaping tomorrow with vision and action. Subheading: “We back visionaries and craft ventures that define what comes next.” Classes: mb-5 max-w-2xl text-base text-gray-300 md:text-lg Animate with FadeIn: - delay: 800ms - duration: 1000ms Button row: flex flex-wrap gap-4 Primary button: - Text: “Start a Chat” - href="#chat" - Classes: rounded-lg bg-white px-8 py-3 font-medium text-black transition-colors hover:bg-gray-100 Secondary button: - Text: “Explore Now” - href="#story" - Classes: liquid-glass relative rounded-lg border border-white/20 px-8 py-3 font-medium text-white transition-colors hover:bg-white hover:text-black - Put its text inside a relative z-10 span. Animate the button row with FadeIn: - delay: 1200ms - duration: 1000ms Right tag: FadeIn: - delay: 1400ms - duration: 1000ms - className: mt-6 flex items-end justify-start lg:mt-0 lg:justify-end Glass element: liquid-glass rounded-xl border border-white/20 px-6 py-3 Text: “Investing. Building. Advisory.” Classes: relative z-10 text-lg font-light md:text-xl lg:text-2xl ================================================== 7. SECTION TWO — OUR STORY ================================================== Section: - id="story" - Classes: relative overflow-hidden border-t border-white/10 px-6 py-20 md:px-12 md:py-28 lg:px-16 lg:py-36 Add a decorative ambient glow: .ambient-orb { position: absolute; width: min(55vw, 760px); aspect-ratio: 1; border-radius: 999px; filter: blur(120px); pointer-events: none; opacity: 0.14; } .ambient-orb-left { top: 5%; left: -35%; background: #64748b; } Wrap the content with Reveal. Content layout: relative z-10 mx-auto flex max-w-[1440px] flex-col items-stretch gap-16 lg:flex-row lg:gap-24 xl:gap-36 Left column: flex flex-1 flex-col justify-center Label: “Our story” Classes: section-label mb-7 Story heading: “Progress belongs to those who can see beyond the obvious—and move before the path is clear.” Make only “move” an element. CSS: .story-heading { margin: 0; font-size: clamp(2.15rem, 4vw, 3.75rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.045em; } .story-heading em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: #e5e7eb; } Paragraph wrapper: mt-10 max-w-2xl space-y-5 text-base font-light leading-relaxed text-white/45 md:text-lg Exact paragraphs: “VEX is an investment and venture platform built for people creating meaningful change. We bring capital, craft, and conviction to one table.” “Our model is intentionally hands-on. We work alongside founders and leaders, turning expansive ideas into focused, durable action.” Value row: mt-12 grid grid-cols-3 gap-4 border-t border-white/15 pt-7 Values: 01 — Capital 02 — Craft 03 — Conviction Value CSS: .story-value { display: flex; min-width: 0; flex-direction: column; gap: 0.65rem; } .story-value p { margin: 0; overflow: hidden; color: #e5e7eb; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.15rem, 2vw, 1.75rem); text-overflow: ellipsis; } .story-value-index { color: rgba(255, 255, 255, 0.28); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; } Right column: flex shrink-0 items-center justify-center lg:w-[44%] lg:justify-end Create a V-shaped masked video using the same video as the hero. CSS: .story-video-mask { width: min(100%, 520px); aspect-ratio: 1; overflow: hidden; clip-path: polygon( 0 5%, 24% 5%, 50% 61%, 76% 5%, 100% 5%, 56% 96%, 44% 96% ); filter: saturate(0.78) contrast(1.05); transform: scale(1.03); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 800ms ease; } .story-video-mask:hover { filter: saturate(1) contrast(1); transform: scale(1.08); } ================================================== 8. SECTION THREE — THREE WAYS FORWARD ================================================== Section: relative px-6 py-20 md:px-12 md:py-28 lg:px-16 lg:py-36 Wrap everything in Reveal with: mx-auto max-w-[1400px] Centered section label: “What we do” Centered heading: “Three ways forward.” Classes: mb-14 mt-5 text-center text-4xl font-light tracking-[-0.04em] md:mb-20 md:text-5xl Cards grid: grid grid-cols-1 gap-4 md:grid-cols-3 Shared card CSS: .pillar-card { position: relative; min-height: 520px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; background: #0a0a0a; } media (min-width: 640px) { .pillar-card { min-height: 580px; } } Cards 1 and 3: padding: clamp(1.5rem, 3vw, 2rem) Every card includes: - Eyebrow - Two-digit number - Heading - Description - Three detail rows - ↗ character at the end of each detail row Shared card content: .pillar-content { position: relative; z-index: 2; display: flex; height: 100%; flex-direction: column; justify-content: space-between; } Descriptions: .pillar-copy { max-width: 22rem; color: rgba(255, 255, 255, 0.55); font-size: 0.875rem; font-weight: 300; line-height: 1.7; } Card 1 description margin-top: 3rem. Card 3 description margin-top: 1.5rem. On screens below 768px, Card 3 description margin-top becomes 3rem. Detail rows: .pillar-details { margin: 2rem 0 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.72); font-size: 0.75rem; } .pillar-details li { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0.8rem 0; } .pillar-details span { color: rgba(255, 255, 255, 0.25); } Card 1 content: - ID: investing - Number: 01 - Eyebrow: Investing - Heading: “Capital for the uncommon.” - Description: “We partner early with category-defining founders and stay close through every inflection point.” - Details: Pre-seed to Series A Global perspective Long-term conviction Card 2 content: - ID: building - Number: 02 - Eyebrow: Building - Heading: “From first principle to first customer.” - Description: “Our venture studio turns sharp insights into enduring companies, combining craft, speed, and operating depth.” - Details: Venture design Product and brand Go-to-market Card 3 content: - ID: advisory - Number: 03 - Eyebrow: Advisory - Heading: “Clarity at consequential moments.” - Description: “We help ambitious teams sharpen strategy, unlock growth, and navigate the decisions that shape what comes next.” - Details: Growth strategy Transformation Strategic narrative Cards 1 and 3 atmospheric glow: .pillar-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: #64748b; filter: blur(90px); opacity: 0.13; pointer-events: none; } Card 1 glow: top: 28%; left: -390px; Card 3 glow: top: -220px; right: -220px; Card 2 contains the pillar video at the top. Card 2: display: flex; flex-direction: column; Video region: .pillar-video-region { position: relative; width: 100%; height: 44%; flex-shrink: 0; overflow: hidden; } Video fade: .pillar-video-fade { position: absolute; right: 0; bottom: 0; left: 0; height: 8rem; background: linear-gradient(to bottom, transparent, #0a0a0a); pointer-events: none; } Card 2 content wrapper: flex: 1; height: auto; padding: 0 2rem 2rem; Card 2 description margin-top: 1rem. ================================================== 9. SECTION FOUR — HOW WE WORK ================================================== Create a full-screen video-backed section. Wrapper: principles-hero relative min-h-[100svh] w-full overflow-hidden Video: absolute inset-0 h-full w-full object-cover object-right md:object-center Add this vignette: .principles-vignette { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.02) 38%, rgba(0, 0, 0, 0.52) 100% ); pointer-events: none; } Wrap content in Reveal: relative z-10 flex min-h-[100svh] flex-col px-5 pb-8 pt-12 sm:px-8 sm:pb-12 sm:pt-16 md:px-16 md:pb-16 md:pt-20 lg:px-24 Top label: “How we work” Main heading with literal line break: Built around conviction. CSS: .principles-heading { margin-bottom: 0; font-size: clamp(3.2rem, 9vw, 9rem); font-weight: 300; line-height: 0.88; letter-spacing: -0.055em; } Use flex-1 space between the heading and bottom panel. Bottom panel: .principles-panel { display: flex; width: 100%; min-height: 280px; flex-direction: column; padding: clamp(0.9rem, 2vw, 1.25rem); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 1.25rem; background: rgba(0, 0, 0, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } On screens below 768px, give the panel margin-top: 4rem. Panel heading row: - Left: “A simple operating system for doing ambitious work well.” - Right: “Three principles” Classes: mb-5 flex flex-col justify-between gap-3 border-b border-white/10 pb-5 md:flex-row md:items-end Principles grid: grid flex-1 grid-cols-1 gap-3 md:grid-cols-3 Principle cards: .principle-column { display: flex; min-height: 190px; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.9rem; background: rgba(17, 17, 17, 0.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } Top-left number and top-right circular checkmark. Checkmark CSS: .principle-mark { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: rgba(255, 255, 255, 0.72); font-size: 0.65rem; } Principle 1: - Number: 01 - Heading: Stay curious - Copy: “We ask better questions before reaching for familiar answers.” Principle 2: - Number: 02 - Heading: Move with intent - Copy: “Speed matters most when every action compounds toward a clear outcome.” Principle 3: - Number: 03 - Heading: Build for endurance - Copy: “We value the durable over the fashionable and partnership over transaction.” ================================================== 10. SECTION FIVE — CTA AND FOOTER ================================================== Section: - id="chat" - Classes: cta-stage relative flex min-h-[115svh] flex-col overflow-hidden px-5 pb-5 pt-16 sm:px-8 sm:pb-8 md:px-12 md:pt-24 lg:px-16 Place the CTA video absolutely behind the content: absolute inset-0 h-full w-full object-cover Add this vignette: .cta-stage-vignette { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.08) 43%, rgba(0, 0, 0, 0.5) 100% ); pointer-events: none; } Reveal content wrapper: relative z-10 mx-auto flex w-full max-w-7xl flex-1 flex-col CTA top grid: grid items-end gap-12 lg:grid-cols-2 Left: Label: “Start a conversation” Heading: “What will you shape next?” CSS: .cta-heading { margin-bottom: 0; max-width: 850px; font-size: clamp(3.25rem, 8vw, 8.5rem); font-weight: 300; line-height: 0.92; letter-spacing: -0.06em; } Right: Paragraph: “Whether you’re building, investing, or reimagining what’s possible, we’d like to hear where you’re headed.” Classes: mb-8 max-w-md text-lg font-light leading-relaxed text-white/70 Button: - href="mailto:hellovex.ventures" - Text: “Start a Chat” - Include a ↗ character. - Classes: group inline-flex items-center gap-6 rounded-xl bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-100 - Animate the arrow on hover: group-hover:translate-x-1 group-hover:-translate-y-1 duration-300 Use flex-1 to push the footer to the bottom. Footer: Classes: footer-glass w-full rounded-3xl p-6 text-white/70 md:p-10 Footer CSS: .footer-glass { position: relative; overflow: hidden; border: 0; background: rgba(255, 255, 255, 0.035); background-blend-mode: luminosity; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .footer-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 20%, transparent 42%, transparent 58%, rgba(255, 255, 255, 0.15) 80%, rgba(255, 255, 255, 0.45) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } Footer top grid: mb-10 grid grid-cols-1 gap-10 md:grid-cols-12 md:gap-12 Left column: md:col-span-5 Create a small rounded V mark: .footer-mark { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.85rem; background: rgba(0, 0, 0, 0.2); } Inside it, display “V”. Beside the mark display: “VEX” Classes: text-2xl font-semibold tracking-tight Right footer column: md:col-span-7, aligned right on desktop. Text: “Investing. Building. Advisory.” Classes: max-w-md text-left text-xl font-light leading-snug text-white md:text-right md:text-2xl Bottom bar: flex flex-col gap-5 border-t border-white/10 pt-6 text-xs uppercase tracking-[0.16em] text-white/40 md:flex-row md:items-center md:justify-between Copyright: © [current year] VEX Add a horizontal line after the copyright on desktop: .footer-line { display: none; height: 1px; flex: 1; background: rgba(255, 255, 255, 0.08); } media (min-width: 768px) { .footer-line { display: block; } } ================================================== 11. SHARED SECTION LABEL ================================================== Use this class for labels such as “Our story,” “What we do,” “How we work,” and “Start a conversation”: .section-label { margin: 0; color: #d1d5db; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } ================================================== 12. RESPONSIVE REQUIREMENTS ================================================== - Use 100svh rather than 100vh for viewport sections. - Navbar center links disappear below md. - Story stacks vertically below lg. - Pillar cards stack below md. - Principles cards stack below md. - CTA switches from two columns to one below lg. - Footer switches from a 12-column desktop layout to a single column. - Avoid horizontal scrolling at every width. - Preserve readable spacing on 320px-wide devices. - Do not truncate headings. - The three Story value words must stay inside their columns. - Keep every video full bleed within its assigned container. ================================================== 13. SEO METADATA ================================================== Page title: VEX — Shaping Tomorrow Description: We back visionaries and craft ventures that define what comes next. Open Graph: - title: VEX — Shaping Tomorrow - description: We back visionaries and craft ventures that define what comes next. - image: /og.png - image width: 1731 - image height: 909 - alt: VEX — Shaping tomorrow with vision and action. Twitter: - card: summary_large_image - same title, description, and image ================================================== 14. FINAL CONSTRAINTS ================================================== - Do not change or paraphrase any copy. - Do not replace any CloudFront URL. - Do not add extra sections. - Do not add icons, libraries, sliders, carousels, testimonials, forms, or navigation drawers. - Do not dim the first hero video. - Do not introduce bright accent colors. - Preserve the exact sequence: 1. Hero 2. Our Story 3. Three Ways Forward 4. How We Work 5. CTA and Footer - Use the exact animation timing and IntersectionObserver behavior described above. - The finished page should feel cinematic, restrained, premium, editorial, and monochromatic. ```