Asme Vision & Liquid Glass Cinema Design Prompt
Overview: Spatial storytelling landing site with multi-video choreography, liquid glass specular borders, Instrument Serif typography, and services grid.
Design Specifications
- Heading Typography: Instrument Serif
- Body Typography: Inter
- Background Color: #000000
- Foreground Color: #FFFFFF
- Target IDEs: Cursor, Windsurf, Claude Code, Gemini
System Prompt Architecture
<role>
You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your goal is to help the user integrate a design system into an existing codebase in a way that is visually consistent, maintainable, and idiomatic to their tech stack.
Before proposing or writing any code, first build a clear mental model of the current system:
- Identify the tech stack (e.g. React, TypeScript, Vite, Tailwind CSS, framer-motion, lucide-react).
- Understand the existing design tokens (colors, spacing, typography, radii, shadows), global styles, and utility patterns.
- Review the current component architecture and multi-section page breakdown.
- Note any constraints (multiple video autoplay performance, intersection observers, mobile responsiveness).
Ask the user focused questions to understand their specific deployment needs:
- Do they want all 5 sections rendered as a continuous single-page journey or split across modular routes?
- How should the email submission bar handle newsletter provider webhooks (e.g., Resend, ConvertKit)?
- Are they deploying to static hosting or a framework like Next.js / Vite?
Once you understand the context and scope, provide a clean, production-grade implementation that follows best practices:
- Implement the exact `.liquid-glass` border-mask trick using the `-webkit-mask-composite: xor; mask-composite: exclude` technique.
- Apply the custom `requestAnimationFrame` video fade system for the hero and autoPlay looping videos for subsequent sections.
- Ensure strict responsiveness, accessible labels, and contrast ratios.
</role>
<design-system>
# Design Style: Asme Vision & Liquid Glass Cinema
## 1. Philosophy
**Vibe:** Dark spatial cinematic storytelling, liquid frosted glassmorphism, enigmatic intellectual luxury, multi-video choreography.
**Core Concept:** An immersive single-page landing site anchored entirely in pure black (`bg-black`) and punctuated by multi-layered video narrative sections. The interface floats on top via "Liquid Glass" - an ultra-subtle `0.01` opacity white background with luminosity blending, paired with a multi-stop specular gradient pseudo-border rendered using CSS mask exclusion.
---
## 2. Design Tokens
### Colors
- `background`: `#000000` (true pitch black)
- `foreground`: `#FFFFFF` (luminous pure white)
- `glass-fill`: `rgba(255, 255, 255, 0.01)` (luminosity blend)
- `glass-border-gradient`: `linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`
- `muted`: `rgba(255, 255, 255, 0.60)`
- `dim`: `rgba(255, 255, 255, 0.40)`
- `hairline`: `rgba(255, 255, 255, 0.10)`
### Typography
- **Heading / Display:** `Instrument Serif`, serif (Google Fonts `@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap')`)
- **Body & UI:** `Inter`, system-ui, sans-serif
- **Hero Title:** `text-7xl md:text-8xl lg:text-9xl white tracking-tight whitespace-nowrap`
---
## 3. Global CSS & The Liquid Glass Recipe
Add this to `index.css`:
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@layer components {
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
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.45) 0%,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
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;
}
}
```
---
## 4. Multi-Section Architecture Breakdown
### Section 1 -- Hero (Full-Viewport)
- Background video covering entire viewport (`object-cover object-bottom`), URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_074625_a81f018a-956b-43fb-9aee-4d1508e30e6a.mp4`
- Vanilla JS `requestAnimationFrame` fade: 500ms fade-in on canplay, 500ms fade-out at remaining time <= 0.55s, 100ms reset on ended.
- Floating liquid-glass navbar with Globe icon, "Asme", links (Features, Pricing, About), and Sign Up / Login controls.
- Centered hero heading: `Know it then <em className="italic">all</em>.`
- Liquid glass email input with circular ArrowRight button, subtitle, and manifesto button.
- 3 circular liquid-glass social buttons (Instagram, Twitter, Globe).
### Section 2 -- About Section (`AboutSection.tsx`)
- Framer-motion `useInView(ref, { once: true, margin: "-100px" })`.
- Top subtle radial gradient.
- Label: "About Us" (uppercase, tracking-widest, text-white/40).
- Heading: `Pioneering then ideas` (*Instrument Serif italic, text-white/60*) `for minds that then create, build, and inspire.` (*Instrument Serif italic, text-white/60*).
### Section 3 -- Featured Video Section (`FeaturedVideoSection.tsx`)
- Max-w-6xl aspect-video container with `rounded-3xl` and entrance motion.
- Video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_054547_9875cfc5-155a-4229-8ec8-b7ba7125cbf8.mp4`
- Bottom overlay: liquid-glass "Our Approach" card on left, "Explore more" liquid-glass button on right.
### Section 4 -- Philosophy / Innovation x Vision (`PhilosophySection.tsx`)
- Heading: `Innovation then x` (*Instrument Serif italic text-white/40*) `Vision`.
- 2-column grid:
- Left: 4/3 aspect video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4`
- Right: "Choose your space" and "Shape the future" text blocks separated by a hairline divider.
### Section 5 -- Services / What We Do (`ServicesSection.tsx`)
- Header row: "What we do" and "Our services" label.
- 2-card grid with hover zoom:
- Card 1: Video `hf_20260314_131748...mp4`, Tag "Strategy", Title "Research & Insight", ArrowUpRight icon in liquid-glass circle.
- Card 2: Video `hf_20260324_151826...mp4`, Tag "Craft", Title "Design & Execution", ArrowUpRight icon in liquid-glass circle.
---
## 5. Complete Component Implementation (React + TypeScript)
```tsx
import React, { useEffect, useRef, useState } from "react";
import { motion, useInView } from "framer-motion";
import { Globe, ArrowRight, Instagram, Twitter, ArrowUpRight } from "lucide-react";
const HERO_VIDEO =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_074625_a81f018a-956b-43fb-9aee-4d1508e30e6a.mp4";
const FEATURED_VIDEO =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_054547_9875cfc5-155a-4229-8ec8-b7ba7125cbf8.mp4";
const PHILOSOPHY_VIDEO =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4";
const SERVICE_1_VIDEO =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4";
const SERVICE_2_VIDEO =
"https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4";
export const AsmeCinemaPage: React.FC = () => {
const videoRef = useRef<HTMLVideoElement | null>(null);
const [opacity, setOpacity] = useState(0);
const fadingOutRef = useRef(false);
const rafRef = useRef<number | null>(null);
const fadeTo = (target: number, durationMs: number, onComplete?: () => void) => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
const start = opacity;
const startTime = performance.now();
const step = (now: number) => {
const elapsed = now - startTime;
const progress = Math.min(elapsed / durationMs, 1);
setOpacity(start + (target - start) * progress);
if (progress < 1) {
rafRef.current = requestAnimationFrame(step);
} else if (onComplete) {
onComplete();
}
};
rafRef.current = requestAnimationFrame(step);
};
useEffect(() => {
const video = videoRef.current;
if (!video) return;
const onCanPlay = () => {
video.play().catch(() => {});
fadeTo(1, 500);
};
const onTimeUpdate = () => {
if (!video.duration) return;
if (video.duration - video.currentTime <= 0.55 && !fadingOutRef.current) {
fadingOutRef.current = true;
fadeTo(0, 500);
}
};
const onEnded = () => {
setOpacity(0);
setTimeout(() => {
if (video) {
video.currentTime = 0;
fadingOutRef.current = false;
video.play().catch(() => {});
fadeTo(1, 500);
}
}, 100);
};
video.addEventListener("canplay", onCanPlay);
video.addEventListener("timeupdate", onTimeUpdate);
video.addEventListener("ended", onEnded);
return () => {
if (rafRef.current) cancelAnimationFrame(rafRef.current);
video.removeEventListener("canplay", onCanPlay);
video.removeEventListener("timeupdate", onTimeUpdate);
video.removeEventListener("ended", onEnded);
};
}, []);
return (
<div className="bg-black text-white font-sans selection:bg-white/20 selection:text-white min-h-screen w-full">
{/* ── SECTION 1: HERO ── */}
<section className="min-h-screen relative flex flex-col overflow-hidden w-full">
<video
ref={videoRef}
src={HERO_VIDEO}
muted
autoPlay
playsInline
preload="auto"
className="absolute inset-0 w-full h-full object-cover object-bottom pointer-events-none z-0"
style={{ opacity }}
/>
{/* Navbar */}
<header className="relative z-20 px-6 py-6 w-full">
<div className="liquid-glass rounded-full max-w-5xl mx-auto px-6 py-3 flex items-center justify-between">
<div className="flex items-center gap-8">
<a href="#" className="flex items-center gap-2 text-white font-semibold text-lg no-underline">
<Globe size={24} className="text-white" />
<span>Asme</span>
</a>
<nav className="hidden md:flex items-center gap-8 ml-8">
{["Features", "Pricing", "About"].map((item) => (
<a
key={item}
href={`#${item.toLowerCase()}`}
className="text-white/80 hover:text-white text-sm font-medium transition-colors no-underline"
>
{item}
</a>
))}
</nav>
</div>
<div className="flex items-center gap-4">
<button type="button" className="text-white text-sm font-medium hover:text-white/80">
Sign Up
</button>
<button type="button" className="liquid-glass rounded-full px-6 py-2 text-white text-sm font-medium">
Login
</button>
</div>
</div>
</header>
{/* Hero Content */}
<div className="relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]">
<h1
className="text-7xl md:text-8xl lg:text-9xl text-white tracking-tight whitespace-nowrap mb-8"
style={{ fontFamily: "'Instrument Serif', serif" }}
>
Know it then <em className="italic">all</em>.
</h1>
<div className="max-w-xl w-full space-y-4">
<form onSubmit={(e) => e.preventDefault()} className="liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3">
<input
type="email"
placeholder="Enter your email"
className="bg-transparent border-none outline-none text-white placeholder:text-white/40 text-base flex-1"
/>
<button type="submit" aria-label="Submit" className="bg-white rounded-full p-3 text-black transition-transform hover:scale-105">
<ArrowRight size={20} />
</button>
</form>
<p className="text-white text-sm leading-relaxed px-4">
Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates.
</p>
<div className="pt-2">
<button type="button" className="liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium hover:bg-white/5 transition-colors">
Manifesto
</button>
</div>
</div>
</div>
{/* Social Icons */}
<div className="relative z-10 flex justify-center gap-4 pb-12">
{[Instagram, Twitter, Globe].map((Icon, i) => (
<button key={i} type="button" aria-label="Social link" className="liquid-glass rounded-full p-4 text-white/80 hover:text-white hover:bg-white/5 transition-all">
<Icon size={20} />
</button>
))}
</div>
</section>
{/* ── SECTION 2: ABOUT ── */}
<AboutSection />
{/* ── SECTION 3: FEATURED VIDEO ── */}
<FeaturedVideoSection />
{/* ── SECTION 4: PHILOSOPHY ── */}
<PhilosophySection />
{/* ── SECTION 5: SERVICES ── */}
<ServicesSection />
</div>
);
};
/* ── Section Components ── */
const AboutSection: React.FC = () => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section ref={ref} className="bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden relative bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)]">
<div className="max-w-6xl mx-auto">
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-white/40 text-sm tracking-widest uppercase mb-6"
>
About Us
</motion.p>
<motion.h2
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.1 }}
className="text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight font-normal"
>
Pioneering then{" "}
<span className="italic text-white/60" style={{ fontFamily: "'Instrument Serif', serif" }}>
ideas
</span>{" "}
for <br className="hidden md:inline" />
<span className="italic text-white/60" style={{ fontFamily: "'Instrument Serif', serif" }}>
minds that then create, build, and inspire.
</span>
</motion.h2>
</div>
</section>
);
};
const FeaturedVideoSection: React.FC = () => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section ref={ref} className="bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden">
<div className="max-w-6xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 60 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.9 }}
className="relative rounded-3xl overflow-hidden aspect-video border border-white/10"
>
<video src={FEATURED_VIDEO} muted autoPlay loop playsInline preload="auto" className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 p-6 md:p-10 flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
<div className="liquid-glass rounded-2xl p-6 md:p-8 max-w-md">
<span className="text-white/50 text-xs tracking-widest uppercase mb-3 block">Our Approach</span>
<p className="text-white text-sm md:text-base leading-relaxed">
We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation.
</p>
</div>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
type="button"
className="liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium"
>
Explore more
</motion.button>
</div>
</motion.div>
</div>
</section>
);
};
const PhilosophySection: React.FC = () => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section ref={ref} className="bg-black py-28 md:py-40 px-6 overflow-hidden">
<div className="max-w-6xl mx-auto">
<motion.h2
initial={{ opacity: 0, y: 40 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8 }}
className="text-5xl md:text-7xl lg:text-8xl text-white tracking-tight mb-16 md:mb-24 font-normal"
>
Innovation then{" "}
<span className="italic text-white/40" style={{ fontFamily: "'Instrument Serif', serif" }}>
x
</span>{" "}
Vision
</motion.h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -40 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
className="rounded-3xl overflow-hidden aspect-[4/3] border border-white/10"
>
<video src={PHILOSOPHY_VIDEO} muted autoPlay loop playsInline preload="auto" className="w-full h-full object-cover" />
</motion.div>
<motion.div
initial={{ opacity: 0, x: 40 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8 }}
className="flex flex-col gap-8"
>
<div>
<span className="text-white/40 text-xs tracking-widest uppercase mb-4 block">Choose your space</span>
<p className="text-white/70 text-base md:text-lg leading-relaxed">
Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries.
</p>
</div>
<div className="w-full h-px bg-white/10" />
<div>
<span className="text-white/40 text-xs tracking-widest uppercase mb-4 block">Shape the future</span>
<p className="text-white/70 text-base md:text-lg leading-relaxed">
We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression.
</p>
</div>
</motion.div>
</div>
</div>
</section>
);
};
const ServicesSection: React.FC = () => {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
const services = [
{
video: SERVICE_1_VIDEO,
tag: "Strategy",
title: "Research & Insight",
desc: "We dig deep into data, culture, and human behavior to surface the insights that drive meaningful, lasting change.",
},
{
video: SERVICE_2_VIDEO,
tag: "Craft",
title: "Design & Execution",
desc: "From concept to launch, we obsess over every detail to deliver experiences that feel effortless and look extraordinary.",
},
];
return (
<section ref={ref} className="bg-black py-28 md:py-40 px-6 overflow-hidden relative bg-[radial-gradient(ellipse_at_center,_rgba(255,255,255,0.02)_0%,_transparent_60%)]">
<div className="max-w-6xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.7 }}
className="flex items-center justify-between mb-12"
>
<h2 className="text-3xl md:text-5xl text-white tracking-tight">What we do</h2>
<span className="text-white/40 text-sm hidden md:inline">Our services</span>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
{services.map((s, i) => (
<motion.div
key={s.title}
initial={{ opacity: 0, y: 50 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: i * 0.15 }}
className="liquid-glass rounded-3xl overflow-hidden group flex flex-col"
>
<div className="aspect-video relative overflow-hidden">
<video src={s.video} muted autoPlay loop playsInline preload="auto" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none" />
</div>
<div className="p-6 md:p-8 flex flex-col flex-1 justify-between">
<div>
<div className="flex items-center justify-between mb-4">
<span className="uppercase tracking-widest text-white/40 text-xs font-semibold">{s.tag}</span>
<div className="liquid-glass rounded-full p-2 text-white/80 group-hover:text-white transition-colors">
<ArrowUpRight size={16} />
</div>
</div>
<h3 className="text-white text-xl md:text-2xl mb-3 tracking-tight font-medium">{s.title}</h3>
<p className="text-white/50 text-sm leading-relaxed">{s.desc}</p>
</div>
</div>
</motion.div>
))}
</div>
</div>
</section>
);
};
export default AsmeCinemaPage;
```
</design-system>