Juno — AI landing page prompt

Copy the full prompt below and paste it into your AI website builder (Lovable, Bolt, v0, Cursor…). Grab the free asset pack juno_assets.zip from the channel post first: it contains PROMPT.txt (this same prompt), Juno's transparent loop video, the poster, the clay sun and a finished reference site. Put the files in /public/juno/.

Build a complete scrolling landing page for "juno", the portfolio of a friendly illustrator. Use React, Tailwind CSS and Framer Motion. It should feel like a soft clay poster that came to life: warm cream paper, puffy black clay lettering, a coral clay sun, and Juno herself (a clay girl hugging a giant pencil) who blinks, smiles, nods and sways her hair. Sections: full-screen Hero, Selected Work (3 cards), About (portrait card + stats), Let's Talk (big coral card) and a small footer. All headlines are REAL TEXT in a free web font, styled as clay with an SVG filter (no letter images). Nothing may ever be cropped: every letter, shadow and doodle must be fully visible at 1280×720 and at 390 px mobile width, with no horizontal scroll.

ASSETS (free pack "juno_assets.zip": put the files in /public/juno/ and use them as-is, don't redraw or regenerate anything)
- juno-loop.webm: 454×580, exactly 6 s, transparent background (VP9 with alpha). This is Juno; all her motion is baked in, so play it untouched: autoPlay, muted, loop, playsInline, poster="/juno/juno-poster.png".
- juno-poster.png: 454×580 transparent first frame (poster, and the fallback for browsers without WebM alpha such as Safari: render an <img> instead of the video there).
- sun.png: 440×440 transparent coral clay sun (round disc plus 12 short rounded rays), with padding so nothing touches the edges.
That's all. The letters are text, the doodles are inline SVG, the card illustrations are CSS.

COLORS & FONTS
- Background: cream #f6e8d0 with a soft glow: radial-gradient(ellipse 120% 70% at 50% 0%, #f9ecd6 0%, #f6e8d0 45%, #f1e1c6 100%).
- Ink #1f1d1a · clay black #232120 · coral #e8735a · mustard #e3a73b · sage #a9c49a · card #fffaf1 · muted text #6e6255.
- Google Fonts: "Lilita One" (all clay headlines), "Fredoka" 600 (wordmark), "DM Sans" 400/500/600 (everything else).

THE CLAY TEXT (the most important part, it must look like puffy, glossy, slightly matte black modelling clay)
- Lilita One, color #232120 plus -webkit-text-stroke in the same color (12px on the 204px hero headline, 4px on section titles) so the letters get fatter and rounder.
- Wrap every letter in <span class="letter"><span class="glyph">X</span></span>; wrap each word in a white-space:nowrap inline-block span so words never break in the middle.
- Apply filter:url(#clay) to each .glyph. IMPORTANT, so the filter never crops the shadow: give .glyph padding: 24px 34px 44px and an equal negative margin: -24px -34px -44px (section titles: padding 12px 14px 18px / margin -12px -14px -18px), and give the filter region x="-20%" y="-20%" width="140%" height="140%". Never put overflow:hidden on a parent of the text.
- Hidden inline <svg width="0" height="0"> with <filter id="clay" color-interpolation-filters="sRGB">:
  1. feTurbulence fractalNoise baseFrequency 1.1, 2 octaves → alpha-only noise (feColorMatrix last row 0 0 0 .9 0).
  2. feGaussianBlur of SourceAlpha, stdDeviation 7, then feComposite arithmetic k2=1 k3=.10 with the noise → a slightly bumpy height map.
  3. feDiffuseLighting on it (surfaceScale 8, diffuseConstant 1, white, feDistantLight azimuth 235 elevation 58), multiplied onto SourceGraphic with feComposite arithmetic k1=1.55.
  4. feSpecularLighting on the same map (surfaceScale 8, specularConstant .5, specularExponent 14, azimuth 235 elevation 48), added with arithmetic k2=1 k3=.22 → soft glossy highlight top-left.
  5. Fine clay speckle: feTurbulence baseFrequency .75, 3 octaves, desaturated, added with k2=1 k3=.09 k4=-.045, then clipped with operator "in" SourceAlpha.
  6. Two shadows merged under it: a soft drop shadow (blur 5, dx -2, dy 10, #9a6a3c at 45%) and a contact shadow (blur 2, dx 2, dy 4, #4a3420 at 35%).
- Make a smaller copy "clay-md" for 44–64px titles (blur 3, surfaceScale 5, noise .06, drop shadow blur 3 dy 6 at 40%, contact blur 1.2 dy 2.5) and "clay-light" for cream text on coral (same as clay-md, k1 1.32).

HEADER (fixed, z-50, height 76px, padding 0 44px)
- Left: wordmark "juno" in Fredoka 600 34px ink, followed by a 9px coral dot.
- Right: "Work" and "About" (DM Sans 500 17px, anchor links to the sections), then a black pill "Let's talk" (ink bg, cream text, 16px, padding 12px 24px, fully rounded, scale 1.04 on hover) linking to #contact.
- After 40px of scroll it gets a frosted background: rgba(246,232,208,.82), backdrop-blur 12px, shadow 0 10px 30px -18px rgba(120,80,40,.35).

HERO (height 100vh, min 600px, position relative)
- A 720×960 "stage" anchored bottom-center (left 50%, bottom 0, transform-origin bottom center), scaled with translateX(-50%) scale(min(innerHeight/1010, innerWidth/860)) and updated on resize. Inside, absolutely positioned (px in stage space):
  - sun.png: left 350, top 258, 406×406, z 1, transform-origin center.
  - h1 "MEET" / "JUNO" on two lines: left 30, top 104, z 2, Lilita One 204px, line-height 175px, letter-spacing -0.025em, clay filter.
  - Juno video: left 192, top 380, 454×580, z 3, object-fit contain. She overlaps the bottom of "JUNO" and the sun; that overlap is intended.
  - A small coral "pop" burst doodle (3 short strokes) at left -50, top 50.
- Hand-drawn doodles (inline SVG, stroke only, width 4, round caps, pathLength 1) positioned in the hero: an ink squiggle (left 8%, top 30%), a coral zigzag (right 10%, top 27%), an ink four-point sparkle (right 16%, top 62%), a coral wave (left 11%, top 71%) and three 8px ink dots (left 17%, top 55%). On mobile (≤820px) move them into the empty top area: squiggle 7%/20%, zigzag right 8%/13%, sparkle right 12%/33%, wave 34%/42%, dots 10%/36%.

SELECTED WORK (padding 120px 0 40px, container max-width 1120px, padding 0 40px)
- Eyebrow "SELECTED WORK": DM Sans 600 13px, letter-spacing .18em, coral.
- Clay title "Little worlds, big smiles" (Lilita One 64px, clay-md, margin-bottom 44px).
- 3-column grid (gap 28px, 1 column on mobile) of rounded soft-shadow cards: background #fffaf1, radius 32px, padding 16px 16px 22px, shadow 0 22px 44px -22px rgba(120,80,40,.38), 0 2px 6px rgba(120,80,40,.06), inset 0 1px 0 rgba(255,255,255,.8). Hover: y -8px and rotate -1deg (spring).
- Each card: a 230px illustration panel (radius 24px) with a pastel gradient and 3 glossy clay balls drawn in CSS (circles with inset shadows: -8px -10px 18px rgba(0,0,0,.14) and 8px 10px 16px rgba(255,255,255,.35), plus a soft drop shadow), all fully inside the panel; then title (DM Sans 600 20px), one line of muted copy (15px) and a small pill tag (12px, bg #f3e3c8, text #7a5a3a).
  1. "Moonberry Nights": peach panel, coral + mustard + cream balls. "A bedtime picture book about a sleepy fox who collects moonlight in jars." Tag "Picture book · 2026".
  2. "Pip the Postman": sage panel, mustard + coral + black balls. "A round little mascot who delivers good news for a neighborhood mail app." Tag "Mascot · 2025".
  3. "Squish Sticker Club": butter-yellow panel, black + coral + sage balls. "A monthly pack of chunky clay stickers, each one a tiny character with a big mood." Tag "Stickers · 2025".

ABOUT (2 columns 1fr / 1.1fr, gap 56px; stacked on mobile)
- Left: portrait card, height 460px, radius 36px, mustard radial gradient (#f6c75e → #e9a93c → #dc9a2f), soft shadow, with a 250px coral clay circle behind and the same Juno video (420px tall) standing on the bottom edge. Her body continues below the frame, so the bottom edge is the only place she touches the border.
- Right: eyebrow "ABOUT", clay title "Hi, I'm Juno!", paragraph (19px, line-height 1.6, #4d4339): "I draw soft, squishy characters for picture books, brands and apps. Everything starts as a pencil sketch and ends up looking good enough to squeeze."
- 3 small stat cards (radius 22px, #fffaf1, soft shadow): "120+ characters drawn", "8 years of doodling", "40 happy clients" (number in Lilita One 34px coral).
- Skill pills: Character design · Picture books · Mascots · Clay 3D · Stickers (white rounded pills, 14px, soft shadow).

LET'S TALK
- Big card: radius 44px (32px on mobile), coral radial gradient (#f08a6e → #e8735a → #dc6248), padding 76px 40px 70px, centered, shadow 0 30px 60px -28px rgba(170,70,40,.55).
- Clay title "LET'S TALK" in cream #fff3e2 (96px, 60px on mobile, clay-light), line "Got a character living in your head? Let's make it squishy." (cream, 20px), and a black pill "hello@juno.studio" (mailto).
- Three cream doodles inside the card (squiggle top-left, sparkle top-right, zigzag bottom-right), kept away from the text on mobile.
- Footer under the card: "© 2026 juno · illustration & character design" on the left, Work · About · Contact links on the right (muted 14px; stacked and centered on mobile).

MOTION (Framer Motion; respect prefers-reduced-motion)
- Header: fade + slide down from -12px, 0.6 s.
- Sun: spring pop from scale 0 (stiffness 260, damping 14, delay 0.1 s), then forever scale 1 → 1.05 → 1 (3 s) and rotate -3° → 3° → -3° (6 s), ease-in-out.
- Hero letters: each pops in from y 60, scale 0.4, opacity 0 with a spring (stiffness 500, damping 15), stagger 0.06 s starting at 0.15 s. Then a jelly wave forever: every 6 s each glyph squashes scale(1.06, 0.9) → stretches (0.97, 1.06) → back to 1 within the first 15% of the cycle, staggered 0.08 s per letter, first wave at 2 s, transform-origin 50% 85%.
- Section titles get the same jelly wave (first at 3 s, 0.06 s stagger).
- Juno video: fade in at 0.5 s.
- Doodles: draw in with stroke-dashoffset 1 → 0 (0.8 s, staggered from 0.9 s), then wiggle rotate -5° ↔ 5° forever (2 / 1.5 / 3 / 2 / 3 s cycles; the sparkle also scales to 1.15). Dots pop in with a spring and bob 4px (1.5 s, staggered).
- Scroll reveal on every eyebrow, title, card, stat, paragraph and the CTA card: scroll-linked with useScroll/useTransform; as the element's top moves from 95% to 70% of the viewport, opacity 0 → 1, y 40 → 0, scale 0.96 → 1; cards in a row stagger by 40px of scroll each.
- Card clay balls bob y 0 → -10px → 0 (3 s, offset by 1 s each).

CHECKS
- Test at 1280×720, 820×1180 and 390×844: no horizontal scroll, every glyph with its full shadow visible, the "g" descender and apostrophes intact, no doodle off-screen.

© 2026 Graphic Designer · @Graphics_designerr. All rights reserved.