类型：Site模板 · 收录：2026-11-05 01:11:43 · 源码：会员可见
# Prompt: scree® clear-backpack hero
Build a one-page brand landing hero for a fictional gorpcore brand, **scree®**. It makes see-through packs from recycled frosted TPU; the idea is "Nothing to hide". Use plain HTML, CSS and vanilla ES modules, with **three.js r186** loaded from jsDelivr through an importmap. There is no framework and no build step.
The voice is dirtbag-climber slang with light starred swearing ("sh*t", "d*mn").
The page is a flat light-grey stage: a frosted translucent backpack in the centre and three pieces of gear around it. You drag the gear into the bag. The bag reacts like a soft jelly body, then dives at the viewer. The about text then pours out of the bag's mouth like honey as you scroll.
## Scale, type and colour
- **Unit:** `--u = 100vw / 1440`, one pixel of a 1440 × 800 design frame. Every size is `N × --u`.
- **Font:** Helvetica, with Inter 400/500 from Google Fonts only when Helvetica is missing. An inline test in the `<head>` checks for Helvetica before first paint.
- **Colours:** only four.
- ground `#c3c3c3`
- ink `#000`
- paper `#fff`
- eye `#d9d9d9`
- **Logo:** "scree®", 38u, italic, tracking −0.11em, top 16u, centred on its ink.
- **Buttons:** black label chips, 115 × 24u, white 14u text with tracking −0.08em.
- Top left in a grid: Menu · Packs / Nothing to hide / Crew.
- Top right: "Stash (0)".
- **Text:** 14u at 120 % with tracking −0.06em. Used for the description and the speech bubble.
## Media
All media is on Higgsfield CloudFront with CORS `*`, because WebGL draws it into textures. Use these exact URLs:
- **Backpack:** an overhead cut-out on transparent, served through `srcset`. The 2560 copy is also the GL texture for the zoom.
- 930w: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/56038449-52b6-4a0e-852b-74365b0778aa.webp
- 1395w: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/8ba39a1d-bbe0-4a9d-b04d-054a5bffd430.webp
- 1860w: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/8384aac6-558b-4494-bd6c-5afb639c69e9.webp
- 2560w: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/b1a4bc78-35fb-40ed-825e-d60e18cf5919.webp
- **Gear:** three square cut-outs at ×2 / ×3.
- Film camera, black with a lime strap: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/da188550-6ebf-46d6-8400-a3ee492d5be9.webp (2×), https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/3959b77a-cdea-4056-b1a4-c5e20c38d521.webp (3×)
- Jelly boulder, a glossy lime gummy with the mascot's eyes: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/56227bce-07e8-4734-aada-acf294f1a461.webp (2×), https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/c80b1806-7e36-431b-bc0a-70d331f3d82f.webp (3×)
- Sticker bottle, steel with mascot stickers: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/c01a14b6-a21b-475a-af70-9c1726f988b0.webp (2×), https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/2d112af6-0dc6-486d-b0eb-27f91b7fbca4.webp (3×)
- **About photos:** nine small inline frames and one 3:2 crew photo.
- Recycled TPU: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/fc1fac83-c1ad-47fa-b091-758d30db7b14.webp
- Inside the pack: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/a8e00fc2-d305-4c5a-9b6b-6ede35e28d9c.webp
- The maker: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/85d454fd-8a37-4667-990f-641916266b4a.webp
- The crag: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/40b0cbba-d881-4e49-858b-80c4cddcd9cf.webp
- The trail: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/c4c8de6e-766a-42ed-b988-8b52728f7db1.webp
- An excuse: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/67f9a455-aef4-4d78-989a-b56480bcad31.webp
- A first send: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/9c0ceb64-4342-4de5-9473-698c577670ef.webp
- Grass: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/121e741b-2269-4f97-b006-ada8e15b190f.webp
- Big outdoor: https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/5eba1b0d-0d00-4cc0-80c2-105d50ca77bb.webp
- Crew (3:2): https://d2ol7oe51mr4n9.cloudfront.net/user_3GJaYKPxdnQG0Q9O26lu6DPmcHu/893f737f-486a-48ad-85ff-b7651b80c304.webp
- **Font:** Helvetica / Helvetica Neue where installed, otherwise Inter 400/500 from https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap
- **Engine:** three.js 0.186.1 from jsDelivr.
## Hero layout (1440 × 800 frame)
- **Backpack:** 465 × 580u, centred, height `min(580u, 72.5svh)`.
- **Gear squares,** placed from the viewport centre:
- camera 194u at (314, 225)
- gummy 143u at (285, 504)
- bottle 221u at (964, 294)
- Each has a hidden name label under it.
- **Description:** centred, 307u wide, 32u from the bottom: "Clear packs made of recycled sh*t. See what's inside, see who made it. Nothing to hide."
- **Mascot:** 92 × 92u, bottom right, 23u from the right and 32u from the bottom. It's a black pebble with two grey capsule eyes, the plush boulder from the bag's carabiner.
- **Bubble:** a black speech pill to its upper left, with a small tail on its right end. It grows leftward as it types.
## Motion and interaction
### Page load
- **Cascade:** a "block in" cascade, 60 ms apart. Each element fades in, moves up 16px and un-blurs from 12px over 600 ms with an expo ease out. The order is:
1. buttons
2. logo
3. Stash
4. the three gear images
5. description
6. mascot
7. bubble
- **Bag:** grows in on its own springs (0.9 → 1 with a slight overshoot) once its photo is decoded, with a fading zoom blur.
- **Bubble:** starts typing at 900 ms.
### Mascot
- **Eyes:** they sit on an invisible sphere behind the face and turn toward the pointer. They slide and narrow toward the edge on a spring (ω 14, ζ 0.9).
- **Rest:** with no pointer, the eyes rest looking left at the bag.
- **Blink:** every 3.8–6.2 s, for 170 ms.
### Bubble typer
- **Typing:** 38–70 ms per character, plus 40 ms after a space and 220 ms after punctuation, with a blinking caret.
- **First line:** "yo. pack the d*mn bag".
- **Hover replies:** hovering an item makes the mascot answer with a fresh lowercase line, never one of the last six. The pool is each item's own four lines plus a shared eight, for example "that's my cousin. bag him" and "hydrate or diedrate".
### Item hover
- **Frame:** a 1px frame fades in over 120 ms.
- **Name strip:** the black name strip under the square wipes in from the left on two springs and overshoots about 1 %. On leave, the left edge chases the right, so the ink exits to the right.
- **Name text:** the white name is clipped to the ink.
### Packing the gear (drag and drop)
- **Dragging:** the item lifts ×1.08 and follows the pointer on a spring. It leans with horizontal speed up to ±10° and stretches along its path up to 10 %, keeping its area.
- **Bag reaction:** the bag is a WebGL plane, and it reacts as one soft body while an item is near:
- the side facing the item reaches toward it, up to 4 % of its width
- the middle swells up to 3 %
- it jiggles in random squash kicks, more often the nearer the item
- **Release over the bag** (inside its ellipse):
- The item flies to the centre, shrinking to 0.25, fading and blurring.
- The bag gulps: a squash and rebound plus a ripple with slight refraction.
- The bag grows ×1.15 per item.
- The mascot says the item's line with a count, for example "cam's in · 1/3".
- **Release elsewhere:** the item springs home.
- **Scroll:** locked until the third item is packed.
### Finale
- **Timing:** 120 ms after the third gulp.
- **Gather:** the heavy bag lifts and squashes for about 200 ms.
- **Dive:** about 1 s, at the viewer, to 70.5 % of the viewport width with its top at 39.4 % of the height. Each channel is on its own spring:
- the zoom leads with about 3 % overshoot
- the drop lags, giving an arc
- it tilts up to ±4° with the fall
- it stretches up to 7 % along the fall
- a radial zoom blur peaks at about 0.05
- **Land:** an impact squash and a jelly wobble, and the mascot blinks.
- **After:** the description lifts away with a blur and scroll unlocks.
### The pour (scroll)
- **One WebGL canvas:** the bag and the about text share a CSS-pixel camera.
- **About text:** one long centred Helvetica paragraph, 47u, line-height 1.05, tracking −0.045em, black on the ground, about 9 lines. It has inline photo chips sized to cap height, in three shapes (wide, square, pill), plus mascot glyphs.
- Full text: "We're scree: [rock], a pile of loose rock that learned to sew. We make clear packs out of recycled sh*t: [photo], so you always see what's inside: [photo] and who made it: [photo]. Nothing to hide, nothing to prove. Every pack gets tested on the crag: [photo], on the trail: [photo] and in the group chat: [rock]. They're see-through like your ex's excuses: [photo], tough like a gumby's first send: [photo] and lighter than your conscience after touching grass: [photo]. We have no relation to big outdoor: [photo], or to anyone who calls a hike a content day. Oh, and the rock: [rock] is the boss. Don't tell him."
- **Text in WebGL:** the paragraph stays in the DOM, fixed and invisible, for layout and screen readers. It's measured word by word and painted into a texture at device pixel ratio.
- **Scrolling:** a spring on scrollY makes it glide.
- **Funnel:** the text streams out of the bag's mouth in a funnel. It's 15 % wide at the mouth and widens to full width over half a screen height. Lines bow, with their middles leading their ends like honey in a pipe. They fade in and un-blur from 22px as they rise above the rim, and nothing is drawn below the rim.
- **Spit:** at the finale, 1–2 lines spit out on their own.
- **Bag:** slides and shrinks to ×0.9 while the text pours, then drops off screen as the crew photo arrives.
- **Crew photo:** pours out under the text, sticks to the centre and grows from 480 × 320u to ×1.5.
- **Reversible:** everything is a function of the scroll spring, so scrolling back pours the text back in.
### Rewind
- **Scrolling up past the finale:** pours the text back in and flies the bag home along its dive springs in reverse.
- **At the top:** the description returns and the mascot repeats its first line. The bag lands, then spits the three items back out one by one, 140 ms apart, each with a hop. It deflates step by step, so the game can start again.
## Performance and fallbacks
- **Render loop:** runs on demand. It wakes on pointer, blink and spring activity and sleeps when everything settles. No layout reads happen inside a frame.
- **No WebGL:** the `<img>` bag and a plain about section under the hero.
- **Reduced motion:** final states, no springs, the line shown at once.
## Acceptance check (1440 × 960)
- **Load:** the grey stage with the bag centred, three gear cut-outs, black label buttons, the italic logo, the description and the mascot typing "yo. pack the d*mn bag".
- **Hover:** an item gets its frame and name ink, and the mascot replies.
- **Drag:** dragging the camera into the bag makes the bag reach, gulp and grow, and the bubble reads "cam's in · 1/3".
- **Finale:** after three items the bag dives and lands.
- **Scroll:** the manifesto pours out of its mouth in a bending funnel, then the crew photo grows to the centre.
- **Scroll back up:** rewinds everything.
- **Content:** no real brands or logos.