Recreate this exact full-viewport portfolio landing page — pixel-perfect match. ═══════════════════════════════════════ TECH / STACK ═══════════════════════════════════════ - React + TypeScript + Tailwind CSS + Vite - Icons: lucide-react (`Play`, `Menu`, `X`) - Single full-screen page: `h-screen w-full overflow-hidden` - Root: `relative h-screen w-full overflow-hidden bg-black text-white` ═══════════════════════════════════════ FONTS (exact) ═══════════════════════════════════════ Load in <head>: 1) Inter (Google Fonts) — body/default: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 2) basis33 (pixel/bitmap monospace) — for `.font-pixel`: <link href="https://db.onlinewebfonts.com/c/d08…
View original source ↗Prompt
Recreate this exact full-viewport portfolio landing page — pixel-perfect match.
═══════════════════════════════════════
TECH / STACK
═══════════════════════════════════════
- React + TypeScript + Tailwind CSS + Vite
- Icons: lucide-react (`Play`, `Menu`, `X`)
- Single full-screen page: `h-screen w-full overflow-hidden`
- Root: `relative h-screen w-full overflow-hidden bg-black text-white`
═══════════════════════════════════════
FONTS (exact)
═══════════════════════════════════════
Load in <head>:
1) Inter (Google Fonts) — body/default:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
2) basis33 (pixel/bitmap monospace) — for `.font-pixel`:
<link href="https://db.onlinewebfonts.com/c/d08bafd725a4cfc309efb5a88e0b63a5?family=basis33" rel="stylesheet">
CSS:
- body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
- .font-pixel { font-family: 'basis33', monospace; }
Where basis33 (font-pixel) is used:
- "ROBERTS" under ADAM
- "ENGINEERING" under DESIGN &
- Brand blurb under name
- Labels "What I Do" and "Services"
- Words "UNEXPECTED" and "EXPERIENCES" inside the hero headline (1.25em size)
Where Inter is used:
- Everything else (nav, ADAM, DESIGN &, body copy, showreel button, awards, footer)
Page title: "Adam Roberts - Design & Engineering"
═══════════════════════════════════════
BACKGROUND VIDEO (exact URL — do not substitute)
═══════════════════════════════════════
Full-bleed background <video>:
src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260725_114042_d2ed2a89-f2fa-449b-9609-da456344257b.mp4"
Attributes: autoPlay muted loop playsInline
Classes: absolute inset-0 h-full w-full object-cover lg:scale-[1.2]
(On large screens, video is scaled 120% for a slight crop/zoom)
All UI sits above video at z-10. No dark overlay — white text over the video.
═══════════════════════════════════════
LOGO (exact SVG)
═══════════════════════════════════════
White geometric “GP / Grilled Pixels” mark, 28×28, viewBox="0 0 256 256":
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 256 256" fill="none">
<path d="M 160 88 L 194 34 L 216 0 L 256 0 L 256 40 L 221.5 93.5 L 200 128 L 256 128 L 256 256 L 96 256 L 96 168 L 64.246 220 L 40 256 L 0 256 L 0 216 L 34 162 L 56 128 L 0 128 L 0 0 L 160 0 Z" fill="white" />
</svg>
Used in top-left navbar AND inside the mobile menu header.
═══════════════════════════════════════
LAYOUT STRUCTURE (top → bottom)
═══════════════════════════════════════
Outer content wrapper (above video):
relative z-10 flex h-full flex-col px-5 sm:px-6 md:px-10 lg:px-14
── 1. NAVBAR ──
flex items-center justify-between py-6
Left: logo SVG
Right desktop (md+): horizontal links, gap-8, text-sm tracking-wide
ABOUT | PROCESS | PROJECTS | CATALOG | D.O.T | TALK
Each: href="#", hover:opacity-70 transition-opacity
Right mobile (<md): hamburger button (Menu icon size 24), p-2 hover:opacity-70
── 2. FOUR-COLUMN META GRID ──
mt-4 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8
COL 1 (left):
h2 text-lg md:text-xl tracking-wide leading-tight
Line1: "ADAM" (font-normal Inter)
Line2: "ROBERTS" (font-pixel text-2xl md:text-3xl)
Then: * asterisk at text-[10px] text-white/50 mt-3
Then brand blurb font-pixel mt-1 text-xs text-white/60 leading-relaxed, line breaks EXACTLY:
Grilled Pixels is my
personal brand - I came up
with it in 2004 based on
"cooking up ideas"
COL 2 (text-right on mobile 2-col, text-left on lg):
h2 same sizing
Line1: "DESIGN &" (Inter font-normal)
Line2: "ENGINEERING" (font-pixel text-2xl md:text-3xl)
COL 3:
Label: "What I Do" — text-base tracking-widest text-white/50 uppercase mb-3 font-pixel
Body: text-sm text-white/90 leading-relaxed max-w-[220px]
"I create the top 1% of experiences for brands and digital products"
COL 4 (text-right on mobile 2-col, text-left on lg):
Label: "Services" — same label styles as What I Do
ul text-sm text-white/90 leading-relaxed space-y-0.5:
- Branding
- Creative Direction & Strategy
- UX/UI Design
- Web Development (React/Nextjs)
- 3D, WebGL / Photography
- Video & Animation
── 3. FLEX SPACER ──
<div className="flex-1" /> ← pushes bottom block to viewport bottom
── 4. BOTTOM SECTION (pb-4) ──
ROW A — grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 items-end
LEFT — Hero headline:
h1: text-3xl sm:text-4xl md:text-5xl lg:text-[3.75rem] xl:text-[4.25rem]
tracking-wide uppercase font-normal
inline style: lineHeight: 0.72
Exact line breaks:
I BRING THE
UNEXPECTED TO ← "UNEXPECTED" is font-pixel font-normal text-[1.25em] inline-block leading-none align-baseline
BRAND & DIGITAL
EXPERIENCES ← "EXPERIENCES" same pixel treatment as UNEXPECTED
RIGHT — column flex flex-col gap-4 sm:gap-6 justify-end:
A) PLAY SHOWREEL button (self-start):
flex items-center gap-3
border border-white/30 px-6 py-3
backdrop-blur-sm bg-white/5
hover:bg-white/10 transition-colors
Play icon: lucide Play size={14} fill="white"
Label: text-sm tracking-wider "PLAY SHOWREEL"
B) Awards row (self-start on mobile, lg:self-end):
flex flex-wrap items-stretch gap-2 sm:gap-3 text-sm text-white/80
Three dark chips, each: bg-[#0B0B0B] px-3 sm:px-4 py-2, flex items-center gap-2
1) "FWA" font-bold text-sm sm:text-base tracking-tight + "x1" text-white/50 text-xs
2) "W." font-bold text-lg sm:text-xl + "x7" text-white/50 text-xs
3) "CSSDesignAwards" font-bold text-[10px] sm:text-xs tracking-tight + "x22" text-white/50 text-xs
ROW B — footer strip:
mt-4 sm:mt-5 grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-4 pt-4
Left: text-xs text-white/60
"Open to freelance, contract or full-time. "
then link "Schedule a call" — text-red-500 hover:text-red-400 transition-colors href="#"
Right: text-xs text-white/60 sm:text-right
"5 full cases • 82 archive fragments • 22 catalog items"
(use • or • between parts)
═══════════════════════════════════════
MOBILE FULLSCREEN MENU
═══════════════════════════════════════
State: menuOpen boolean
Overlay: fixed inset-0 z-50 bg-black/95 backdrop-blur-md flex flex-col
Transition: transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
open: opacity-100 pointer-events-auto
closed: opacity-0 pointer-events-none
Header: flex items-center justify-between px-6 py-6
Left: same logo SVG
Right: X button (size 24) closes menu — p-2 hover:opacity-70
Nav: flex flex-col items-center justify-center flex-1 gap-8
Same 6 links as desktop, text-2xl tracking-widest
Staggered entrance when opening:
transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
open: opacity-100 translate-y-0
closed: opacity-0 translate-y-4
transitionDelay when open: `${100 + i * 60}ms` (i = 0..5) → 100,160,220,280,340,400ms
when closed: delay 0ms
Clicking a link closes the menu
═══════════════════════════════════════
ANIMATIONS / INTERACTIONS SUMMARY
═══════════════════════════════════════
1. Background video: continuous autoplay loop, muted
2. Nav link hover: opacity → 70%
3. Showreel button hover: bg white/5 → white/10
4. Schedule a call hover: red-500 → red-400
5. Mobile menu overlay: 500ms cubic-bezier(0.16,1,0.3,1) fade
6. Mobile menu links: staggered fade+slide-up (60ms steps, start 100ms)
7. Hamburger / close icon hover: opacity 70%
8. NO scroll (overflow-hidden, h-screen) — single locked viewport composition
9. NO page load entrance animation on desktop content (static on paint)
10. Video scales to 1.2× at lg breakpoint
═══════════════════════════════════════
COLOR TOKENS
═══════════════════════════════════════
- Page bg: #000000 (black)
- Primary text: #ffffff
- Muted: white/90, white/80, white/60, white/50
- Accent link: Tailwind red-500 (Schedule a call)
- Award chips: #0B0B0B
- Showreel button: border white/30, fill white/5, blur
- Mobile overlay: black/95 + backdrop blur
═══════════════════════════════════════
RESPONSIVE BREAKPOINTS (Tailwind defaults)
═══════════════════════════════════════
- < md: hamburger + 2-col meta grid; awards/showreel stack under headline
- md+: desktop nav links
- lg+: 4-col meta grid; 2-col bottom (headline | showreel+awards); video scale 1.2
- sm/md/lg/xl: progressive padding and headline size as listed above
═══════════════════════════════════════
DO NOT
═══════════════════════════════════════
- Do not add cards, purple gradients, cream backgrounds, or extra sections
- Do not change copy, award counts, or line breaks
- Do not replace the CloudFront video URL
- Do not use Inter for pixel words — must be basis33
- Do not add scrolling or a second viewport section
```Reusable method
Key decisions
Check whether information hierarchy, module order, and CTA clarity all hold in the final result.
Adapt it to your subject
Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.
Where it breaks
Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.
Recommended models
Derived Skill
Skills are derived from repeated patterns in published cases. They are not a separate submission type.
Creator
MotionSites focuses on production-ready AI interfaces and is active on MotionSites. “Modern Agency” is the current representative case, built with 待补充模型 with its stability retest open to votes.
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
Prompt
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName, }: { children: React.ReactNode; title?: string; href?: string; className?: string; containerClassName?: string; }) => { const [transform, setTransform] = useState( "translate(-50%,-50%) rotateX(0deg)" ); const onMouseEnter = () => { setTransform("translate(-50%,-50%) rotateX(40deg) scale(0.8)"); }; const onMouseLeave = () => { setTransform("translate(-50%,-50%) rotateX(0deg) scale(1)"); }; return ( <a className={cn( "relative group/pin z-50 cursor-pointer", containerClassName )} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} href={href || "/"} > <div style={{ perspective: "1000px", transform: "rotateX(70deg) translateZ(0deg)", }} className="…
Prompt
// components/ui/3d-pin.tsx "use client"; import React, { useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const PinContainer = ({ children, title, href, className, containerClassName…
.webp)
Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> ``` Body font: `'Inter', sans-serif`. Display font (huge ghost text + bottom-right link): `'Anton', sans-serif`. **Image data (4 items, exact URLs and colors):** ```ts const IMAGES = [ { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' }, { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4d…
Prompt
Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using `lucide-react` for icons. The component is a character-figurine carousel called "TOONHUB". **Fonts (load in `index.html` head):** ```html <link re…