类型：Site模板 · 收录：2026-10-11 20:56:10 · 源码：会员可见
Build one standalone file, index.html. Put all CSS in one <style> and all JavaScript in <script> tags. No React, Vue, Tailwind, Bootstrap, or other libraries. No <video>. No <img> for the gallery. Reply with the file only.
The gallery is the part that usually comes out wrong. Read that section before you write anything else.
FONTS
@font-face "Nouver Sans" 400 from assets/fonts/nouver-sans-regular.woff2
@font-face "Nouver Sans" 700 from assets/fonts/nouver-sans-bold.woff2
@font-face "Nouver Serif" 400 from assets/fonts/nouver-serif-regular.woff2
font-display:block
--sans: "Nouver Sans","Helvetica Neue",Helvetica,Arial,sans-serif
--serif: "Nouver Serif","Times New Roman",Times,serif
Headline and the words Sable and THE VEIL use the serif. Everything else uses the sans.
COLORS
--bg:#0B0C0E
--nav:rgba(4,4,4,.96)
--ink:#FFFFFF
--head:#FBFBF9
--lede:#F8F8F8
--muted:rgba(255,255,255,.715)
--logo:#FBFBF9
--red:#C72D39
--sand:#E4D8CC
--sand-ink:#2E231A
Page background is --bg plus a 22×22 dot tile: a 2×2 white square at x=8,y=8 with opacity .15.
Join In is white with text #131313. Begin the Work is --red with text #FFE3E4 and a soft red inset glow. The prompt pill is --sand with text --sand-ink. Its round button is rgba(0,0,0,.22) and the arrow is #2A2522.
PAGE
One dark full-viewport screen. Nav, headline, gallery, three-line lede, sand prompt pill, logo marquee, hairline rule. Nothing else.
COPY
Brand: Nouver. Logo mark is a white 24×18 mark: a top bar, a shallow arc, a bottom bar.
Nav: Gallery, Experience, Libraries, Artists, Options. Gallery, Libraries, and Artists have a small white chevron.
Buttons: Join In, Begin the Work.
Headline, accessible name: "Reveal any campaign, scene, film or score you imagine"
Visible headline: "Reveal any " + a swapping word + " you imagine"
The swapping word cycles: campaign, scene, film, score. It starts as campaign.
Lede, three lines:
AI studio for timeless work.
Build your singular vision and collaborate with AI agents until
the scenes, films, and audio feel exactly as you pictured.
Pill aria-label: "Frameboard: start a prompt"
Footer: "Adopted by designers from"
Logos, in this order, duplicated once for a seamless loop: velvetroom (sans bold), Sable (serif), Maison (sans bold), Auria (sans bold), THE VEIL (serif), lumen.com (sans bold), Noctis (sans bold).
LAYOUT
Reference artboard is 1920×1200.
Desktop, when width ≥ 1242, width/height ≥ 1.15, and height ≥ 500: scale that artboard to cover the viewport with no empty bands. Nav is an 84px bar, inset 25px, bottom radius 10px, background --nav, blur 18px. Headline is serif, 79px, centered, near the top of the artboard, nowrap. Lede is 24px / 35px, centered, each line nowrap, below the gallery. Pill is 432×78, radius 22px. Marquee runs at 72px/s along the bottom. A 4px rule sits under it.
Tablet, width ≥ 544 and height ≥ 566: same pieces, scaled to about 0.647 of the desktop sizes. Wide tablets keep the headline, lede, and pill inside the gallery bow. Tall tablets stack headline, gallery, lede, pill. Nav is 62px with a menu button; links open in a row under the bar.
Phone portrait, width < 544: "you imagine" wraps to the second line. Gallery is a cropped full-width band of the same bow. Lede and pill sit together. The 432×78 pill scales down as one piece. Logos keep desktop spacing at 0.62 scale.
Phone landscape, width ≥ 544 and height < 566: one-line headline, short gallery band, lede and pill stacked, then side by side from 660px wide.
Fill 100svh. Honor safe-area insets. The menu button toggles the links. Escape, outside click, and choosing a link close it.
GALLERY TILT
Every photo is a flat, front-facing rectangle. Left and right edges are vertical. Top and bottom are horizontal. People in the photos stand upright.
Do not rotate the cards. Do not use rotateY, rotateX, rotateZ, skew, perspective(), or matrix3d. Do not slope the top edge down toward the middle. Do not lean the side cards inward. Do not build a hallway, corridor, tunnel, or floor. A wrong gallery looks like two walls of tilted pictures meeting at a vanishing point, with the text sitting on that floor.
The only change from card to card is width, height, and vertical position.
Center cards are short, about 90–120px tall on the 1920 artboard, and sit in one horizontal band across the middle.
Each step toward the left is wider and taller. The top rises and the bottom drops. The far-left card is the tallest and is cut off by the left edge.
The right side does the same toward the right edge.
The row is a shallow bow of upright photos: small in the center, large at both edges. The bow comes from the card heights, not from tilting the pictures.
MOTION
Left-wall cards travel only left. Right-wall cards travel only right. One slot takes 0.87s. A card is born small at the center, grows as it moves outward, and leaves through the side. It never turns while it moves. Use requestAnimationFrame and cap each frame at 0.1s. Pool 11 cards per wall and recycle them.
If prefers-reduced-motion, freeze the first frame.
Slot rectangles, [left, right, top, bottom] on the 1920 artboard. Draw each one as a normal div with left, top, width, and height. Ignore any idea of a skewed quad.
Left wall, from the center outward:
[853,945,524,623]
[743,853,520,629]
[597,743,495,646]
[432,597,443,694]
[245,432,371,768]
[56,245,269,868]
[-150,56,187,960]
[-400,-194,187,960]
[-650,-444,187,960]
[-900,-694,187,960]
Right wall, from the center outward:
[945,1067,530,619]
[1067,1177,525,624]
[1177,1323,497,647]
[1323,1489,450,695]
[1489,1677,386,773]
[1677,1864,307,837]
[1864,2070,182,945]
[2114,2320,182,945]
[2364,2570,182,945]
[2614,2820,182,945]
At the first frame, left wall from the center outward: black-feather-detail, gold-necklace-detail, theater-black-gown, red-leather-fashion-portrait, rain-portrait, pearl-necklace-portrait, left-edge-fashion-portrait.
Right wall from the center outward: white-coat-city, floral-gold-detail-rebuilt, amber-perfume-bottle, dark-fashion-portraits, black-feather-gown, ivory-and-black-gown, right-edge-fashion-portrait.
After that, cycle these. Left: right-edge-fashion-portrait, ivory-and-black-gown, black-feather-gown, dark-fashion-portraits, amber-perfume-bottle, white-coat-city, black-feather-detail, gold-necklace-detail, theater-black-gown, red-leather-fashion-portrait, rain-portrait, pearl-necklace-portrait, left-edge-fashion-portrait.
Right: left-edge-fashion-portrait, pearl-necklace-portrait, rain-portrait, red-leather-fashion-portrait, theater-black-gown, gold-necklace-detail, black-feather-detail, white-coat-city, amber-perfume-bottle, dark-fashion-portraits, black-feather-gown, ivory-and-black-gown, right-edge-fashion-portrait.
Cards are divs with background-size:cover. Use these URLs exactly.
black-feather-detail https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/f0d14731-b158-4994-b8d4-d5c5a57c67a3.webp position 50% 50%
gold-necklace-detail https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/3fabcf29-cac1-46c7-9bc5-7ab2a24e39e2.webp position 50% 55%
theater-black-gown https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/a329757c-6f72-42f8-a0a0-5b822540a2ef.webp position 50% 50%
red-leather-fashion-portrait https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/b9aec7f1-97fb-4f47-b0a9-a42c96539565.webp position 50% 45%
rain-portrait https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/9075e549-c6af-4b87-ac2b-012c0ac51436.webp position 50% 40%
pearl-necklace-portrait https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/c537ea08-3609-4412-a52a-cd39dbd905dd.webp position 38% 30%
left-edge-fashion-portrait https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/bae55207-18ee-472b-b685-af0cce222d8e.webp position 62% 30%
white-coat-city https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/dc120eca-3154-46f2-b682-739d0c0091bd.webp position 52% 50%
floral-gold-detail-rebuilt https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/045cbeff-26d4-44f9-9796-752222004a78.webp position 50% 50%
amber-perfume-bottle https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/03dc4fb3-eb7a-4c3c-9273-5a932242dcdf.webp position 55% 55%
dark-fashion-portraits https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/733afc83-58e7-4ed6-9e8f-7624cef043ed.webp position 45% 40%
black-feather-gown https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/90cfe909-ca87-464e-bc37-dde5a6dcf91c.webp position 50% 45%
ivory-and-black-gown https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/2d42e541-5749-4636-9846-71e00f196d0e.webp position 50% 40%
right-edge-fashion-portrait https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/c8208b52-e260-44a2-b133-8309f9317295.webp position 40% 30%
A frosted slab sits in the hole of the bow: 435×116, centered, background rgba(255,255,255,.043), backdrop-filter blur(6px). The headline sits above that hole. The lede and the pill sit below the bow.
OTHER MOTION
Headline word: hold 1.4s, then a 0.6s mosaic pixelation from 1px blocks up to 13px and back. The words "Reveal any" and "you imagine" stay still.
Prompt pill types at 26ms per character, holds 1.6s, fades 0.27s, waits 0.5s, then the next line. Start already showing "Frameboard". Then loop:
Frameboard a 30-second fragrance film lit only by candlelight…
Generate a noir campaign for a winter velvet collection…
Score a slow cello theme for the runway finale…
Mock up a lookbook for an ivory and black bridal line…
Logo marquee moves at 72px/s. Duplicate the list so the loop is seamless.
Reduced motion: gallery frozen on the first frame, word "campaign", pill text "Frameboard", marquee stopped.
Before you finish, check that all 14 cloudfront.net webp URLs are in the file, the card edges are vertical, and there is no rotateY and no hallway perspective.