cinematic-landing-page

name	cinematic-landing-page
description	Use this plugin when the user wants a premium, GSAP-driven cinematic B2B landing page: a scroll-driven full-screen video slider hero with clip-path ellipse transitions, SplitText char-reveal headlines, a masonry product gallery, scroll-reveal about text, a partner marquee, Lottie-style feature cards, and a multi-office footer. Invoke for 'cinematic landing page', 'video hero landing', 'bakery / food-service landing', 'GSAP scroll site', or when the user references the Cinematic Landing Page template.
version	0.1.0
od	{"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}}

Cinematic Landing Page — Bakery Facilities

Produce a single-page, scroll-cinematic B2B landing site for "Bakery Facilities", a premium bakery-solutions company. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy/data and (if asked) port to the React stack; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, layout, sections, and animations described below.

This is the authoritative build brief. Follow it exactly — named colors, fonts, video URLs, breakpoints, and animation params are locked.

Stack

• Default output: the single self-contained example.html seed (vanilla HTML/CSS/JS). It includes everything inline; the only remote refs are the 3 CloudFront hero videos and picsum.photos gallery stills (stable CDNs — keep them).
• If the user explicitly asks for the project form, port faithfully to React 18 + Vite + TypeScript + Tailwind + GSAP (ScrollTrigger + SplitText) + Lottie. No Framer Motion — all motion is GSAP. Keep the design identical while porting. Map the vanilla ports back to their framework origin:
  • IntersectionObserver toggling .in → GSAP ScrollTrigger with once: true.
  • passive scroll listener writing inline clip-path / transform / word opacity → GSAP useScroll/ScrollTrigger scrub.
  • per-char setTimeout reveal → GSAP SplitText char stagger (30ms).

Fonts (Google Fonts)

Import: https://fonts.googleapis.com/css2?family=Luxurious+Script&family=Manrope:wght@500&family=Open+Sans:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap

• font-body: 'Open Sans' — body, nav, buttons.
• font-accent: 'Instrument Serif' — hero h1, section titles, about body (uppercase).
• font-manrope: 'Manrope' (500) — labels, card text.
• font-luxurious: 'Luxurious Script' — "for Professionals" subtitle + "About us" title.

Color System (CSS Variables) — locked

--background: 0 0% 9%;       --foreground: 0 0% 100%;
--primary: 0 0% 100%;        --primary-foreground: 0 0% 9%;
--secondary: 0 0% 97%;       --muted: 0 0% 20%;
--muted-foreground: 0 0% 75%; --accent: 0 0% 15%;
--border: 0 0% 20%;          --radius: 2px;
--hero-cta-bg: 0 0% 97.3%;   --hero-cta-text: 0 0% 9%;

Gold accent #CB9D06 — every hover state (nav links, buttons, footer links, FABs). Border radius base 2px. Container padding 5%. No purple/indigo. The gold is the only chromatic accent; everything else is black/white/grey.

Section 1 — Hero (scroll-driven video slider)

• Wrapper height: calc(100vh + 300vh); inner position: sticky; top: 0; height: 100vh; overflow: visible.
• 3 stacked <video> slides (autoplay loop muted playsinline, object-fit: cover), z-index 1/2/3. Locked URLs:
  • https://plugin-assets.open-design.ai/plugins/cinematic-landing-page/hf_20260515_113235_88e0d62e-8103-40c1-948e-f0a4f886ffd1-e00afb.mp4
  • https://plugin-assets.open-design.ai/plugins/cinematic-landing-page/hf_20260515_114315_ee3663e6-bd79-41b4-9e5b-0fae62827eb9-b97001.mp4
  • https://plugin-assets.open-design.ai/plugins/cinematic-landing-page/hf_20260515_114559_dca18b14-90f5-47c4-8a84-3cbae9bd8a0c-62cb47.mp4
• Transition: SCROLL_PER_SLIDE_VH = 150. Per slide compute localProgress over its scroll window, ease with cubic in-out p<0.5 ? 4p³ : 1-((-2p+2)³)/2, then clip-path: ellipse(${5+progress*150}% ${8+progress*150}% at 50% 50%).
• H1 "THE SMART BAKERY SOLUTION": desktop font-accent, font-size: 9.7vw, line-height: 1, white-space: nowrap, letter-spacing: -0.04em, bottom: -26px. Mobile 40px, line-height 1.1, wrap, centered, bottom: 48px, px-4. Animation: GSAP SplitText per char {opacity:0,y:40}→{opacity:1,y:0}, 0.8s, 30ms stagger, power3.out, autoStart on load.
• Subtitle "for Professionals" (Luxurious Script): desktop 3vw, mobile 12vw, absolute inset-x-0 top-0, padding-top: calc(80px + 60px). Same SplitText params; fires after h1 completes (~600ms).

Section 1 Navbar (fixed; transparent → black on scroll)

• fixed top-0 left-0 right-0 z-20 flex items-center px-4 md:px-10. scrollY > 50 → bg-black/90 backdrop-blur-[80px] shadow-md py-2; else transparent py-4.
• Left: region dropdown (Globe + "Hong Kong / Macau"; options Mainland China / Hong Kong-Macau / Taiwan).
• Center: 4-leaf-clover logo SVG (viewBox 0 0 305 304, white, the 4 paths from the prompt), h-[32px] md:h-[48px] normal, h-[24px] md:h-[32px] scrolled, flanked by dropdowns.
  • Left menus: About Us (Our History / Food Service Experts / Creating unforgettable culinary experiences), Partnering With Us (Sourcing from trusted suppliers / Empowering Customer Operations / Our Experts).
  • Right menus: Our Products (Viennese Pastry / Bread / Dessert / Savory / Speciality Pastry / Culinary Aid / Ingredient), Let's Connect! (Contact / LinkedIn / WhatsApp / Newsletter / Brochure / Join Us).
• Right: language switch EN / 繁, active = bg-[#CB9D06] text-white.
• Dropdown: bg-white shadow-lg py-2, items px-4 py-2.5 text-[13px], hover bg-[#CB9D06] text-white.
• Mobile: hamburger → full-screen overlay bg-black/95 backdrop-blur-md, accordion menus.

Floating nav (right side, desktop only)

fixed right-4 md:right-6 top-1/2 -translate-y-1/2 z-50 hidden md:flex flex-col gap-4. 3 pill buttons (48px, rounded-full, bg-black, expand on hover): Download icon + "Download Brochure"; LinkedIn SVG (paths from prompt) + "LinkedIn"; MessageCircle + "Chat With Us". Hover bg-[#CB9D06], label slides in via max-width 300ms.

Section 2 — Product gallery (masonry)

• bg-white py-8 md:py-16 flex justify-center; inner w-[90%] md:w-[65%].
• Grid: desktop ≥1000px = 4 cols (row 1: 4 equal; row 2: 3 cards, middle spans 2). Mobile = 2 cols. Aspect ratio 3:4, row gap 40px, item padding 4px.
• 7 items: Viennese Pastry, Bread, Dessert, Savory, Sweet Treats, Culinary Aid, Ingredient (Culinary Aid is the span-2 middle card). Backgrounds https://picsum.photos/seed/bakery-<seed>/600/800.
• Entry: ScrollTrigger start "top 85%", once; {opacity:0, y:+120, filter: blur(10px)} → {opacity:1, y:0, blur(0)}, 0.8s, power3.out, 0.05s stagger.
• Hover: CSS transform: scale(1.2) on the bg image, transition: transform 6s cubic-bezier(0.22,0.61,0.36,1).
• Labels: text-left text-black text-sm mt-2 font-manrope font-medium.

Section 3 — About (scroll-reveal text)

• bg-white py-16 md:py-32 flex flex-col items-center justify-center px-6 md:px-[18%].
• Title "About us": font-luxurious text-[32px] text-center text-black mb-[20px].
• Body: uppercase font-accent text-[24px] leading-[36px] md:text-[40px] md:leading-[56px] text-center text-black (1976 Louis Le Duff founding story copy — swap freely, keep tone/length).
• Scroll reveal (GSAP scrub): container rotation 3deg → 0; per-word opacity 0.1 → 1 (stagger 0.05); per-word blur 4px → 0. Triggers tied to section top→bottom crossing the viewport.
• Button "Read more": px-8 py-3 bg-black text-white font-manrope text-sm tracking-wide hover:bg-[#CB9D06] transition-colors duration-300.
• Partner marquee (below, mt-16 md:mt-[140px]): infinite left scroll, @keyframes marquee translateX(0)→translateX(-50%) 60s linear, pause on hover, white gradient fade edges 80px. 12 partners as font-body text-[14px] tracking-[0.2em] uppercase text-black/40: Bridor de France, Traiteur de Paris, Panidor, Boncolac, Mademoiselle Desserts, Mountry, Pfalzgraf, Dolceria Alba, St Michel, Poppies Bakeries, Alysse Food, Les Delices du Chef.

Section 4 — Partnering With Us

• Full-width dark background image with overlay. Title "Partnering With Us": font-accent uppercase text-[28px] md:text-[40px] leading-[1.4] text-primary, SplitText chars (same hero params, on view).
• 4 cards grid-cols-2 md:grid-cols-4 gap-2 md:gap-[8px], container w-[90%] md:w-[64%]. Each bg-black px-4 md:px-6 py-6 md:py-8 flex flex-col items-center text-center gap-3 md:gap-4: a Lottie loop icon (w-10 h-10 md:w-12 md:h-12, gold), label text-primary font-body text-[12px] md:text-[14px] tracking-wide capitalize. Cards: Trusted Sourcing, Food Safety Standards, Operational Efficiency, Expert Support. Entry: GSAP y:80→0, 0.7s, power3.out, stagger i*0.15, ScrollTrigger start "top 90%", once. (Seed substitutes Lottie with a small SVG that has a subtle scale-pulse keyframe; in the React port use real lottie-react.)

Section 5 — Footer

• bg-white. Top (px-6 md:px-10 lg:px-16 pt-12 md:pt-20 pb-10 md:pb-16): left phone [phone] (text-[13px] text-black/40 uppercase tracking-wider) + email [e-mail] (text-[14px] font-bold, hover gold); right "Navigate" column (About Us / Partnering With Us / Our Products / Let's Connect!) + "Social" column (WhatsApp / LinkedIn / Newsletter). Links text-[15px] text-black font-medium hover:text-[#CB9D06].
• Offices row (4 across desktop, stacked mobile): Head Office (Hong Kong), Mainland China (Shanghai), Taiwan (New Taipei City), Macau. Each: region title (12px uppercase tracking-wider black/40), company name (13px semibold), address (12px black/60), phone + email.
• Bottom bar bg-black px-6 md:px-10 lg:px-16 py-4: left copyright text-[12px] text-white/40, right Privacy Policy + Terms of Service text-[12px] text-white/40 hover:text-white.

SplitText / global CSS

SplitText config type: chars, smartWrap: true, charsClass: "split-char font-accent", char stagger 30ms. Global:

.split-char { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; }

Tailwind specifics

Border radius 2px base; container padding 5%; custom keyframe marquee (translateX(0) → translateX(-50%), 60s linear infinite); tailwindcss-animate plugin.

Responsive breakpoints

Mobile-first. md: = 768px, lg: = 1024px. Gallery columns: 1 (<400px), 2 (400–1000px), 4 (≥1000px). Hero h1 switches to the 40px mobile treatment, subtitle to 12vw, floating nav hides, navbar collapses to hamburger at ≤767px.

Hard rules

• All motion is GSAP (ScrollTrigger + SplitText) + Lottie — never Framer Motion.
• Gold #CB9D06 is the only accent; no purple/indigo/teal/green substitutes.
• Keep the 3 CloudFront hero video URLs and the picsum.photos gallery stills exactly; do not swap to other hosts.
• Do not use remote avatar hosts (i.pravatar.cc, dicebear, etc.) — they 403 in the sandbox. Any generated decoration is an inline SVG data URI.
• Start from example.html; only swap copy/data and (if requested) port to React. Do not redesign.