类型：Site模板 · 收录：2026-11-05 01:12:42 · 源码：会员可见
# Prompt: Lena Varga 3D sculpture slider hero
Build a single-file, one-screen **portfolio hero for a fictional 3D artist, Lena Varga**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. A full-bleed video shows three cute, glossy 3D character sculptures, one at a time, each on its own saturated studio colour with a soft floor horizon. Small white uppercase UI frames the edges, and a huge heavy two-line title in the bottom left changes with each character, its letters flipping out and in.
## Media
- **Video:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/d421af2b-3a93-443b-b72c-a9d6fc24f30e.mp4` (1280×720, 24fps, 9.958s, muted). It loops seamlessly with a hard loop: never fade it, never crossfade, never play it in reverse.
- **Poster:** the video's first frame, `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/b8a23163-141c-4b17-9d32-a5af006f45f4.jpg`
- **Timeline:** each character swooshes past the camera and the background colour cuts to the next one. These cut times drive the whole UI.
| Time | Character | Background |
|---|---|---|
| 0–2.83s | Happy hippo | teal `#044146` |
| 2.83–5.96s | Polar bear cub | cobalt `#0245B2` |
| 5.96–9.12s | Tree frog | lime `#6D9E19` |
| 9.12–9.958s | Hippo again | teal (continues into the loop) |
- **Reduced-motion stills:** one plate per character:
- `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/698ab204-466d-4914-89c8-9ca5d4b13e72.jpg` (hippo)
- `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/46afa9af-3565-4277-ad0b-cd19c26c5214.jpg` (bear)
- `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/a3331796-e4a0-42d8-9e5a-52c6e3c5f7ef.jpg` (frog)
## Frame and type
- **Frame:** a 1440×960 (3:2) design frame. `--u = min(100vw / 1440, 100vh / 960)` and every size is in `u`.
- **Video:** full-bleed `object-fit: cover` behind everything.
- **Montserrat:**
- 900 for the logo, the titles and the badge
- 600 for all other UI
- all text white and uppercase
## Layout (1440×960)
- **Nav:** the row is centred at y = 80u, running from 104u on the left to 105u from the right.
- **Logo:** "LENA / VARGA", stacked 900 at 10.5u.
- **Rule:** a 32u white line, then "CONTACT" at 11.5u.
- **About:** "ABOUT" at x = 820u (not centred, as in the reference).
- **Icons:** two 18u icons on the right, a music note and a speech bubble (no brand logos).
- **Left text:** "3D ARTIST & CG SUPERVISOR / AT @NOVA_PROD" at (104u, 184u), 16.5u on a 1.22 line. Under it, at y = 252u, a thin 46u arrow button. It nudges right on hover.
- **Right text:** "CGI, BLENDER, / NUKE AND SCULPT!", right-aligned to 105u from the edge, at y = 184u.
- **Meta row:** at y = 689u, 10.5u: a counter "01 / 03" in a 169u column, then "MODELING, CGI, BLENDER".
- **Title:** bottom left at 101u, 76u from the bottom. Montserrat 900 at 94u, line-height .955, tracking −.012em. One per slide:
- "HAPPY / HIPPO"
- "POLAR / PUFFBALL"
- "FANCY / FROGGY"
- **Scroll badge:** a 98u white disc, 105u from the right and 68u from the bottom.
- "SCROLL • SCROLL • SCROLL •" runs on a circular text path around a small centre dot, in the current slide's tone: teal `#0C7F86`, cobalt `#1650D8` or lime `#5F8F0F`.
- The ring spins once every 12s.
- It scales to 1.06 on hover.
## Motion: everything follows the video clock
- **One rAF loop:** it reads `video.currentTime` and renders the UI as a pure function of that time. Seeking, or a frame-by-frame recorder that seeks the video, reproduces it exactly.
- **Active slide:** the slide is hippo if t < 2.83, bear if t < 5.96, frog if t < 9.12, and otherwise hippo. The counter and badge tone switch exactly at the cut.
- **Letters:** each title line is split into letter spans.
- **Letters out:** this starts 0.9s before the slide's cut. Line 1 starts first and line 2 starts 0.32s later. Letters go left to right, 0.06s apart, each taking 0.34s with ease-in.
- Each letter lifts up and left (−.34em, −.3em), swings `rotateY(−70°)` around its right edge, tilts −6° and skews.
- It fades and blurs as it goes.
- **Letters in:** this starts 0.3s after the cut, with line 2 0.32s later and letters 0.06s apart. Each takes 0.42s, ease-out cubic.
- Letters start foreshortened, `perspective(5em) rotateY(72°)` around the left edge, with `rotateX(18°)`, `skewX(−14°)`, a +.28em/+.16em offset and a .06em blur.
- They open flat into place: a motion-blurred flip-in like the reference.
- **Loop wrap:** compute times cyclically (mod 9.958), so the hippo title that starts flying in at 9.12 finishes cleanly after the loop.
- **Before the video plays:** show slide 1 fully set.
## Interaction
- **Next / previous:** wheel, swipe, arrow keys, the arrow button and the SCROLL badge go to the next (or previous) character. They seek the video to 0.95s before that character's cut, so the old title flies out, the character swooshes in and the new title flips in. Throttle this to about 1.1s.
- **Reduced motion:** no video. Show the plate still for the current slide with static titles. Navigation swaps plate and title instantly.
## Phone (under 768px)
- **Composition:** the same, at fixed small sizes:
- 20px gutters
- 10px nav
- left and right texts at 11px under the nav, with the right text right-aligned
- title 42px at the bottom left
- 58px badge bottom right
- **Video:** still cover-cropped.
## Acceptance check (1440×960)
- The hippo floats over teal with "HAPPY / HIPPO" set big in the bottom left.
- At 2.83s the bear swooshes in on cobalt: "01 / 03" turns to "02 / 03" and "POLAR / PUFFBALL" flips in letter by letter. Then the frog on lime gets "FANCY / FROGGY", and the loop returns to the hippo with no fade.
- **Content:** no real brands, names or logos.