类型：Site模板 · 收录：2026-10-17 12:02:24 · 源码：会员可见
Build one standalone HTML file and nothing else. Do not add sections, rewrite copy, rename classes, change colors, or swap assets. Inline all CSS in one <style> and all JavaScript in one <script> at the end of <body>. Do not use local files. Every image src and data-preview must be the exact CloudFront URL below. There is no video on this page.
Fonts, loaded only by this import inside the style block:
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Limelight&family=Manrope:wght@400;500;600&display=swap');
Logo: Limelight. Titles: Italiana. Body: Manrope. Paper color #f5f2ec on #000. color-scheme dark.
Page: title "HiJOY — Dress the dream". Description "Dress the dream before it wakes. Enter the surreal botanical world of HiJOY." Black circular favicon with a serif H, as an SVG data URI. Preload the two first-scene corner images. Viewport width=device-width, initial-scale=1. theme-color #000000.
Scroll journey is 1886svh. A sticky 100svh stage holds three botanical scenes (starts 0, 1.3, 2.6), a growing eye flower, a blackout, then two 1672×941 assemblies, then a collection that overlaps the stage by 100svh. Scroll position maps to animation time 0–14.2. Pointer parallax on fine pointers. prefers-reduced-motion disables movement and uses opacity only. Mobile layout switches at max-width 700px. Also scale layers at min-aspect-ratio 2/1 and max-aspect-ratio 3/2 when width is at least 701px.
CloudFront host, use these URLs exactly:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/
centr (eye): 62c20c53-61ae-460c-97c3-10ca1608cd13.webp — 713×743
garden-left: aca53b67-c320-4b26-9576-7563ac045177.webp — 1212×1257
garden-right: 32bfa9eb-c9f2-4e60-b126-ad0179645d81.webp — 1225×1261
rose-canopy: 09a22099-47c3-47bb-bd9d-6448b16fb427.webp — 1235×1236
iris-canopy: dc4b4d2a-bcec-4faa-ad74-758b5e25c7dd.webp — 1254×1250
poppy-vine: 52eab0e6-6092-4eb3-844b-097b1eb25f5e.webp — 575×1415
eye-vine: bbd5f44f-29dd-4690-b8b7-f6e4a4fe2bc5.webp — 507×1406
flower-garland: 88e0d1d5-37d2-4ba3-b23f-9d1a834af164.webp — 1945×780
3left-top: 9e357306-5a03-4266-b64c-c3c6d314e5a9.webp — 378×438
3left-bot: d24fe11d-57b2-414d-8b8d-c5a649d0dbc4.webp — 601×631
3right: b9bc627a-e591-45c7-a914-af08ce48677b.webp — 370×403
butterfly: b82c6264-1d66-4c62-a8d6-d23187a39377.webp — 1517×985
left-centr-2: 89704363-73fd-497f-ad1d-226c48f517e7.webp — 871×944
rigth-top-2: c9f82218-b667-4d66-8ec1-a7587f9e919b.webp — 701×658
rigth-bot-2: 95ad540d-86a7-472b-93fc-f8a4a9548315.webp — 636×489
left-bot-2: 51af14ec-500b-476b-94b6-b19aa36b0644.webp — 607×665
left-top1: e0253483-6501-42a4-bbb9-97ad208f0d4a.webp — 762×853 — fetchpriority high, also preload
right-top: 1c640940-fd49-4cbf-98a4-cfcc88be259f.webp — 805×858 — fetchpriority high, also preload
bot-centr: 4099cb85-2769-47a7-b749-a83e0fa94ea2.webp — 739×714
left-bot1: 015a08ba-2ac8-4ff3-bef9-4dcf97ecb4c4.webp — 764×843
right-bot: 517aa56c-6f31-4800-afa1-4cef6534a5b0.webp — 605×535
4-1 ground: b8f876e0-cf76-4c4c-a60f-7244b76dd68c.webp — 1672×941
4-2 table: 56544c14-644e-46d4-81b9-113ee53d046e.webp — 1672×941
4-3 models: 10126324-7911-4110-99e1-5bd05870397b.webp — 1672×941 — alt "Two models wearing botanical print clothing in a garden setting"
4-4 frame: 483098cf-a366-4308-83e0-b578ae4913ac.webp — 1672×941
5-1 foreground: a797589c-b1aa-4707-ab20-24e0917bea89.webp — 1672×941
5-2 garden: 2a49b9fb-2848-47fc-8948-1b89afa28ca1.webp — 1672×941
5-3 rider: 01dcd5bf-7f7b-4e77-aaed-4aa1406c35d3.webp — 1672×941 — alt "A woman in botanical clothing standing with a bicycle"
5-4 frame: 2002eda1-141d-429c-9b44-6a4e5e0f606f.webp — 1672×941
detail-1 Oversized Blazer: 55137970-e84a-43f1-ae82-f1969742caf6.webp
detail-2 Wide-Leg Trousers: fed630a5-d69f-45d4-8d33-98d9c92244e1.webp
detail-3 Leather Belt: 75e96723-6e49-49c9-a364-1dc69859bea7.webp
detail-4 Silk Blouse: 950e5e1e-ab93-41d1-92d3-4e8cbed2aae7.webp
detail-5 Maxi Dress: aec083e8-edaf-4d8c-a022-914d2a2170d6.webp
detail-6 Knitwear Set: 6b4d14b9-68e4-4bb3-9269-62fe25dd3663.webp
Scene three, data-start 2.6, back to front. Each layer is position absolute, left var(--x), top var(--y), width var(--w), transform translate(-50%,-50%) rotate(var(--angle)). Attributes are data-depth, data-exit-x, data-exit-y, data-turn, data-delay, data-lag, data-pointer, data-arc, data-angle, plus the extras named:
third-garden-left garden-left: --x -2% --y 63% --w 47% --angle -7deg; depth .34 exit -32,19 turn -7 delay .34 lag 220 pointer 9 arc -18
third-garden-right garden-right: 100%,79%,45%,8deg; .46, 35,27, 9, .29, 195, 12, 22
third-canopy-left rose-canopy: 15%,-2%,55%,-14deg; .58, -32,-40, -13, .2, 165, 17, 18
third-canopy-right iris-canopy: 87%,-6%,54%,14deg; .72, 39,-44, 15, .16, 140, 22, -23
third-poppy poppy-vine: 7%,61%,16%,-12deg; .84, -43,17, -20, .12, 120, 25, 32
third-vine eye-vine: 99%,54%,17%,6deg; .48, 36,8, 9, .14, 180, 12, 18
third-garland flower-garland: 48%,112%,78%,-3deg; .7, -5,58, -5, .09, 145, 17, -17
third-left-top 3left-top: 8%,22%,42%,-5deg; 1.03, -53,-35, -16, .04, 100, 25, 26
third-left-bottom 3left-bot: 10%,86%,59%,3deg; 1.28, -53,49, 15, .02, 72, 36, -22
third-right 3right: 90%,43%,57%,3deg; .92, 62,-7, 16, .08, 120, 25, -24
third-butterfly butterfly: 73%,17%,15%,17deg; 1.65, -46,-45, -31, .1, 48, 46, 47; data-flight .8 data-flight-phase 2.3
third-butterfly-near butterfly: 20%,67%,10%,-24deg; 1.95, -57,-37, -34, .05, 42, 54, -48; data-flight -1.1 data-flight-phase 4.1
Scene two, data-start 1.3. Extra entry attributes where listed:
second-garden garden-right: 95%,66%,49%,0deg; .5, 40,28, 8, .15, 180, 12, 12; entry-scale 1.23 entry-spread .72 entry-turn 12
second-canopy flower-garland: 50%,-8%,79%,180deg; .62, 4,-52, -7, .12, 160, 16, -20; 1.19, .8, -9
second-vine poppy-vine: 0%,48%,18%,-8deg; .7, -43,-12, -9, .09, 145, 18, 30; 1.3, .7, -18
second-left left-centr-2: 10%,32%,48%,-3deg; .85, -55,-28, -10, .06, 130, 24, 16; 1.32, .76, -14
second-right-top rigth-top-2: 88%,19%,44%,5deg; 1.03, 52,-44, 17, .02, 100, 30, -24; 1.36, .73, 21
second-right-bottom rigth-bot-2: 85%,88%,60%,0deg; 1.18, 51,49, -12, .04, 86, 34, 18; 1.26, .76, -17
second-hand left-bot-2: 10%,86%,38%,-5deg; 1.47, -47,58, -16, .4, 95, 39, -30; data-late-entry true data-entry-turn -25
second-butterfly butterfly: 74%,76%,13%,-19deg; 1.9, 42,-56, 36, .24, 42, 52, 55; entry-scale 1.3 entry-spread .82 entry-turn 32; flight -1.15 phase 1.4
Scene one, data-start 0. data-inset .2 on the four marked layers:
first-garden garden-left: 3%,72%,49%,0deg; .42, -35,24, -7, .17, 190, 11, -17
first-canopy-left rose-canopy inset .2: 20%,1%,52%,-6deg; .55, -37,-31, -9, .14, 168, 16, 14
first-canopy-right iris-canopy inset .2: 82%,-2%,59%,5deg; .65, 37,-39, 11, .11, 150, 19, -19
first-vine eye-vine: 0%,45%,18%,-6deg; .72, -43,4, -12, .08, 140, 22, 25
first-left-top left-top1 inset .2: 6%,31%,39%,-5deg; 1, -56,-30, -17, .04, 98, 31, -22
first-right-top right-top inset .2: 94%,28%,42%,4deg; .91, 54,-40, 15, .07, 116, 26, 26
first-bottom bot-centr: 54%,111%,53%,-5deg; 1.09, 11,62, 12, .06, 94, 29, -24
first-left-bottom left-bot1: 9%,85%,45%,-5deg; 1.32, -52,49, 17, .02, 68, 38, 30
first-right-bottom right-bot: 94%,87%,40%,8deg; 1.5, 51,55, -19, 0, 55, 42, -23
first-garland flower-garland: 48%,111%,81%,-4deg; .79, -7,46, -7, .11, 138, 23, 22
first-butterfly butterfly: 23%,77%,12%,-18deg; 1.86, -30,-62, -38, .2, 44, 50, -52; flight 1 phase .2
Copy, centered, z-index 5. Wordmark "HIJOY" links to #journey, Limelight, letter-spacing .16em, underline border #f5f2ec9c.
H1: Dress the dream / before it wakes.
Paragraph, Manrope uppercase: FROM SHOWROOM SHINE TO LASTING PROTECTION, WE REVIVE EVERY DETAIL OF YOUR CAR WITH EXPERT CARE AND PLANET-FRIENDLY PRODUCTS.
Button link #second-dream: EXPLORE THE DREAM ↗. Paper fill, black text, hover transparent with paper text.
H2, starts hidden: Reality, recut into / something you / can wear.
Chapter anchor #second-dream. Its top is set in JS to distance * 1.3 / 14.2.
Assembly canvases are width max(100vw, 177.68svh), aspect-ratio 1672/941, bottom aligned, translateX(-50%).
Four canvas data-camera-start 6.92 data-camera-end 8.86 data-camera .055. Pieces:
assembly-ground 4-1: start 4.48 span .78 from 0,42 scale 1.18 turn 0 depth 1.35 lag 76 drift 3.2 end 8.08 exit-span 1.12 exit 0,64 scale 1.28 turn 0
assembly-table 4-2: 5.12, .82, -29,15, 1.12, -5, .8, 126, 1.6, end 7.92, exit 1.02, -42,12, .82, -8
assembly-models 4-3: 5.8, .88, 12,18, .79, 3, .5, 168, -.9, end 7.82, exit 1.12, 28,-18, 1.16, 5
assembly-frame 4-4: 6.5, .82, -36,-11, 1.16, -7, .24, 220, .8, end 7.72, exit 1.22, -52,-9, 1.21, -9
Five canvas data-camera-start 9.1 data-camera-end 12.6 data-camera .065, transform-origin 50% 12%:
assembly-five-foreground 5-1: end 12.48 exit-span 1.18 exit 0,64 scale 1.32 turn -5; start 8.18 span .95 from 0,48 scale 1.24 turn 4 depth 1.7 lag 58 drift 4.8
assembly-five-garden 5-2: end 12.35 span 1.15 exit -55,16 scale .88 turn -7; start 8.78 span .96 from -28,22 scale 1.14 turn -4 depth 1 lag 112 drift 2.5
assembly-five-rider 5-3: end 12.28 span 1.25 exit 68,-13 scale 1.2 turn 8; start 9.38 span 1.05 from 28,13 scale .76 turn 6 depth .54 lag 166 drift -.8
assembly-five-frame 5-4: end 12.18 span 1.3 exit -66,-16 scale 1.22 turn -10; start 10.1 span 1.15 from -48,-10 scale 1.2 turn -8 depth .24 lag 228 drift .7
Stack: frame, garden, rider, foreground, and for scene four ground in front, models above table, frame behind.
Look card four, data-start 6.85 data-span .42 data-end 7.72 data-exit-span .62. Eyebrow LOOKBOOK / DETAILS. Title Look Descriptions.
Silk Blouse €1 900 — A relaxed silhouette with a delicate sheen, soft draping, and an open neckline for an elegant everyday look
Maxi Dress €7 300 — Lightweight fabric, refined tailoring, and gentle volume create an elegant look for evening outings
Knitwear Set €6 100 — Soft knitwear, straight trousers, and a restrained palette create a comfortable look that easily transitions
Look card five, data-end 12.12 data-exit-span .55 data-start 10.68 data-span .5:
Oversized Blazer €1 900 — A structured oversized blazer with clean lines and a soft drape, paired with tailored trousers for a polished everyday look
Wide-Leg Trousers €7 300 — Wide-leg trousers with refined tailoring create a graceful, modern look for day-to-night wear
Leather Belt €6 100 — A slim leather belt with a subtle metallic buckle adds definition to the waist and elevates the overall outfit
Card: top 2.44%, right 1.38%, width clamp(300px, 21.35vw, 390px), dark gradient, 1px rgba(245,242,236,.13) border, blur 10px. On max-width 700px the four-card sits top 16px full width minus 24px, the five-card sits bottom 14px.
Collection id collection, heading Pieces of the dream. Sprigs: poppy-vine left sway 1.2, eye-vine right sway -.75, butterfly sway 1.8. Six buttons use the detail URLs and the same names, prices, and descriptions as the look cards, in this order: Oversized Blazer, Wide-Leg Trousers, Leather Belt, Silk Blouse, Maxi Dress, Knitwear Set. Hover or focus shows a fixed pill preview, aspect-ratio 1.75, width clamp(210px, 17vw, 300px), radius 999px, following the pointer. Cart button, bag icon, count 0, opens dialog "Your bag" / "Your bag is empty." / "Explore the collection". Footer brand HIJOY. Copy: Botanical patterns. Unexpected details. A little dream to wear every day. Links: The dream #journey, The collection #collection, About HiJOY #about. © 2026 HiJOY. All rights reserved. Privacy policy and Terms & conditions are disabled links.
CSS that must be included exactly, including both max-width 700px blocks:
Scene one z-index 3. Scene two starts opacity .22 blur 1.6px, z-index 2. Scene three starts opacity .09 blur 2.3px, z-index 1.
Brightness: first gardens and canopies, second garden and canopy, third vine .72. Third gardens .62. Third canopies and poppy .82.
Eye width min(84vw, 130vh), translate(-2.5%, -1.5%). Shade is a radial gradient #0005 at center. Wordmark top 3.8%. H1 clamp(3.25rem, 5.65vw, 7rem). H2 clamp(3rem, 4.8vw, 6rem).
At max-width 700px, retarget every first-, second-, and third- layer with the mobile left/top/width values: first garden -13%/71%/98%, canopies 10%/4%/106% and 97%/8%/124%, vine -5%/48%/33%, left-top -5%/27%/88%, right-top 112%/29%/95%, bottom 59%/106%/114%, left-bottom -9%/88%/112%, right-bottom 102%/86%/100%, garland 51%/104%/171%, butterfly 17%/75%/27%; second garden 113%/74%/103%, canopy 56%/-3%/162%, vine -9%/47%/31%, left -14%/26%/109%, right-top 106%/17%/97%, right-bottom 103%/91%/133%, hand -8%/87%/91%, butterfly 83%/73%/27%; third vine 108%/53%/40%, gardens -14%/60%/100% and 112%/80%/103%, canopies 5%/0%/112% and 103%/1%/111%, poppy 2%/59%/34%, near butterfly 20%/71%/24%, garland 50%/105%/153%, left-top -11%/20%/89%, left-bottom -9%/89%/119%, right 110%/43%/123%, butterfly 79%/17%/34%. Eye 157vw. H1 clamp(2.1rem, 9.1vw, 4rem). Assembly canvas 235vw; five-canvas 330vw left 60%. Hide the collection butterfly. Sprigs 48vw and brightness .42. Footer stacks. Cart top 19px right 12px.
Wide screens min-aspect-ratio 2/1: layers width calc(var(--w) * .88) except canopies and garlands. Tablet max-aspect-ratio 3/2 and min-width 701px: layers 1.15, left layers shift -5%, right layers +5%, canopies top -1%, garlands top 105%.
prefers-reduced-motion: scroll-behavior auto and no transitions.
Animation, one rAF loop, smoothstep, inertia 1-exp(-dt/90), per-layer lag from data-lag. Scroll sets target = clamp((scrollY-journeyTop)/distance)*14.2.
Scenes fade in from their distant opacity across local time -1.3 to 0, then fade out from 1.05 to 1.4. Second scene starts 19–36% larger and closer to center, then settles. Late-entry hand enters from the left between local -0.6 and -0.08. Butterflies arc with data-flight and foreshorten wings with scaleX. Eye appears from time 0.78 to 2.6 and scales .32*exp(max(0,t-.85)*.66 + max(0,t-2.76)*2.07) until t 4.45. First headline scales to 2.2 from .1–.7 and fades .38–.7. Second scales to 2.4 from 1.37–2.12, fades in 1.12–1.32 and out 1.72–2.12. Details travel down 85% of the stage from .02–.65. Logo fades 3.13–3.63. Blackout 3.8–4.31. Assembly visible 4.35–4.48, then pieces enter and exit on their data-start/end, with camera zoom .055 and .065. Look cards fade and counter-parallax. Collection logo, title, rows, footer, and sprigs reveal on scroll with the existing offsets, rotations, and sway. Escape and outside pointerdown hide the preview. Bag closes on backdrop click.
Output the complete document with those URLs, that CSS, that markup, and that script. Keep the noscript fallback that shows the assembly and collection without motion.