类型：Site模板 · 收录：2026-10-26 23:38:42 · 源码：会员可见
# Prompt: loops® virtual store hero
Build a **3D virtual clothing store for a fictional archive Y2K brand, loops®**: a poster-style hero over a blurred three.js room, which the wheel zooms into, and then a walk-around room of garment racks. Use plain HTML, CSS and ES modules with three.js 0.186.1 from jsDelivr (importmap `three` → `.../three@0.186.1/build/three.module.js`, `three/addons/` → `.../examples/jsm/`). No framework, no build step. Desktop first.
## Look
- **Mood:** a cool, slate-blue studio. A dark ceiling fades down into light grey walls and an icy lit floor, with soft film grain over everything except the UI.
- **Type:** one family, Helvetica Neue (local), falling back to Inter 400/500 from Google Fonts only on devices that lack it. A head script measures a test string against monospace to decide.
- **Four sizes:**
- caption 18px
- body 29px
- list 47px
- display 172px
Leading is 0.8 on poster text. Tracking on poster text is −0.08em. Nothing is under 18px.
- **Colour:** only black, white and their alphas, plus one accent, yellow `#F3FF00`. Yellow is used only as a fill, always with black text on it.
- **Atmosphere:** a gradient map in 11 steps, equal in OKLab lightness, from `#182026` to `#CBD4DC` (hue about 205°).
- Every room surface computes a lightness index and takes the map's colour through a 256×1 lookup texture, built at boot from CSS tokens.
- Walls are light at the bottom and darken up into a black ceiling over 2.8m, with a short sweep into the floor at the foot.
- The floor is near-white at the walls and darker toward the middle.
- Corners and the floor seam get soft, wide creases. Each plane takes its own tone from one side light.
- There are no lines and no visible fixtures.
- The garments are excluded from the map.
- **Film grain:** monochrome and near-Gaussian, about 1 level of amplitude, strongest in the mid-tones. Cells are 1 CSS px. It reseeds at 20Hz, only on frames that actually render.
## Preloader
- **Look:** a 300px glass ring (white at 30% with an inner shadow from below) and the percentage in display type, over the full atmosphere gradient.
- **Count:** an inline script eases the number toward 15% while three.js downloads. After that the real share takes over: fonts, every garment texture, the steel maps, uploads to the GPU and `compileAsync`. It never counts backwards and takes at least 1.2s.
- **Exit:**
1. It holds at 100 for 200ms.
2. The ring scales to 1.06 and blurs out over 600ms.
3. The ground dissolves over 700ms.
- **Hero entrance:** the hero blocks rise 16px out of a 12px blur, staggered 60ms apart.
## Hero (over the room)
- **Background:** the room, rendered live from a pose turned 34° left and 2.2° down: camera at (0.67, 1.6, 0.99)m, fov 55. It is blurred 8px by a CSS filter and scaled 3% so the blurred edge stays off screen.
- **Header:** two 26px circles as the logo at the top left, in `difference` blend; it returns to the hero. "menu" and "// cart" sit at the top right, in plain white 18px, 40px apart.
- **Poster:** positions are measured from the screen centre.
- "Archive Y2K / Brand" in list size, centred, starting 205px above centre.
- Two glass circles (90×45) and **loops®** in display size, white at 30% with an SVG inner-shadow filter.
- Three overlapping yellow chips: "Rare pieces", "Re-worn", "2k27" at (+93, +17), (+156, +44) and (+111, +71).
- Three white notes: "Curated", "Drops", "Weekly" at (−197, +91), (−134, +118) and (−179, +145).
- The link "loops.store" at (−38, +322).
- **Pointer parallax:** five groups, each on its own spring (ζ 0.95), moving against the pointer. Nearer groups move more:
| Group | Travel |
|---|---|
| chips | 48px |
| notes | 36px |
| name | 27px |
| top line | 18px |
| link | 15px |
The camera also shifts up to ±0.36m sideways and ±0.18m vertically while turning to keep a point 14m ahead fixed. Near and far objects drift apart, which gives a real 3D parallax.
- **Into the room:** the page never scrolls.
1. The wheel (and ↓, PgDn, Space) drives a lead over 110vh, and the progress follows on a spring.
2. Past 70% the zoom commits and finishes on its own in about 0.9s.
3. The text zooms past the viewer: scale 1 → 3.6 about the screen centre, blur up to 44px, fading out, with the nearest group leaving first.
4. The camera blends from the hero pose into the room by progress², so it moves little under the scroll and most of the way during the snap.
5. The room's blur and scale clear by 85% progress.
6. The hero hides with opacity only, never `display:none`, so it stays rasterised.
- **Back:** the logo flies the camera back and brings the text out of the blur, nearest group last.
## Room
- **Space:** a 10×10×3.2m room with four walls, each with a free-standing brushed-steel floor rack 0.5m from the wall.
- **Frame:** a Ø32mm tube bent into a П shape, 3.3m long, rod 1.8m high.
- **Feet:** heavy bell-shaped feet, 0.6m tall.
- **Steel:** metalness 1, lit only by a PMREM of an environment drawn from the same gradient map.
- **Steel maps (CC0):**
- roughness `https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/16d9da3a-d46d-4809-9e90-700be257583f.jpg`
- normal `https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/63e59a29-d7b9-485e-8953-1006dad08c2b.jpg`
- **Halls:** the walls alternate men, women, men, women. A soft embossed wall label ("man / clothing" with the two-circle mark) sits above each rack.
- **Garments:** ten generated Y2K pieces hang on every rack, ordered so that neighbours contrast:
- graphite studded long-sleeve
- sage waffle racer
- halftone acid tee
- harness tee
- eye hoodie
- 00 jersey
- stripe zip
- chrome racer
- velour flame zip
- baby tee
Each garment is a set of transparent WebP views (816×1040, hook at top centre) at 0, 22.5, 45, 67.5 and 90°, plus an optical-flow atlas PNG. All of them are on Higgsfield CloudFront and listed in per-garment manifests. Example front views:
- `https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/3eccffc5-7560-4ab0-9f6f-d68f839fda11.webp`
- `https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/550ebd49-3dac-4dbe-bace-6a87b3f67174.webp`
- `https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/44b8086b-ffa3-43c4-b139-b1788b78626b.webp`
At rest, garments hang side-on. Each casts a soft analytic shadow onto the wall from a key light 9° from the left and 16° up.
- **Overview gaze:** in the room, the view follows the pointer without a press, up to ±20° yaw and ±6° pitch, on a spring (k 12, c 6.2). Past 75% of the half-width the room keeps turning that way, speeding up toward the edge to 40°/s. The pointer alone can take you all the way round. Wheel and drag turn the room.
- **Flights:** clicking a rack flies the camera there, with the rod spanning 1.1× the screen width at fov 45. Two springs in series give an S-curve. A "← back" link and Esc return to the overview.
- **At a rack, on hover:**
- The garment under the pointer turns from side to front through its five frames, morphing along the optical flow instead of crossfading, on an S-curve that reaches 90% in about 0.29s.
- It tilts its hem 9° toward the viewer, and a light sheen sweeps across it while it turns.
- Its neighbours part like an accordion.
- Garments swing like pendulums when brushed past.
- A yellow caps caption with the garment's name appears under the hem.
- **Tabs:** "Store · Man · Woman" at the bottom edge, room only.
- The active tab is a 453×32 black bar with white text. The others are yellow, sized to their text.
- One black ink glides to the active tab: its leading edge is quicker than its trailing edge, so it stretches and gathers in. The labels under the ink are a clipped white copy.
- The bar enters as the zoom commits.
- **Render loop:** renders on demand with springs everywhere, and sleeps when nothing moves.
## Acceptance check (1440×960)
- After the preloader, the poster sits over a softly blurred room with racks of garments on both sides.
- Moving the pointer makes the text layers and the room drift against each other in depth.
- Scrolling zooms the poster past the viewer, the blur clears, and the camera lands in the sharp room facing a rack, with the tab bar rising in.
- Moving the pointer to the screen edge keeps the room turning.
- **Content:** no real brands or logos.