Juice Agency

Six prompts, in build order. Each one describes the visual language, not the original site.

• Main build prompt+−

  Copy

  Create a full-viewport creative-agency landing screen led by this signature: huge warm-cream, wordmark-like display letters act as a background wall while a coral basketball with animated dark seams balances on the raised index finger of a pale-aqua illustrated hand. Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Frame the desktop hero at 1920×968 (≈1.98:1); preserve that aspect ratio for any canvas, poster, or video asset.
  
  Use a flat leaf-green page ground (#5CA75D), cream type architecture (#FFFEE8), near-black editorial ink (#111111), coral ball (#FF8053), pale-aqua hand (#B6DDDA), blue hand linework (#1B68D8), and tiny yellow nail accents. There are no gradients, texture overlays, card shadows, frosted glass, or generic section grids. Keep the page visually like a screen-printed animated poster.
  
  Build a relative-positioned hero with min-height: 100svh and overflow:hidden. Place a massive decorative display word behind everything at roughly 71–76vw wide and ~53–57vw high, about 10% from the top; set it in Riposte or a similarly blunt, heavy grotesk. It should be cream, tightly tracked (~-0.07em), roughly 520–650px at this reference width, with exceptionally deep rounded letter interiors. The letters are scenery, not a headline: use an original word or abstract lettering and provide accessible hidden text if needed. Let the hand and ball overlap it at centre with the ball in front.
  
  Place an original black silhouette mark at about 40px from top and left. Center a narrow pale-aqua announcement link near y=36px, around 440px wide and 34px tall, in Juice Mono at ~14px uppercase. At the upper right, make a ~48px black square menu control with two thin green lines. Give all controls descriptive aria-labels and visible keyboard focus outlines.
  
  The coral ball is roughly 410px in diameter, centered around 53% viewport width and 53% viewport height. Create it as an SVG circle with several clipped, dark-brown, thick curved seam paths. The finger rises from the bottom centre and meets the ball’s underside; the hand is roughly 250px wide, begins below the bottom edge, and has a naïve editorial-illustration quality: flat aqua fill, 3–4px cobalt contour strokes, yellow painted nails, and slightly irregular curves. Use your own hand artwork, not recognisable source artwork. Put hand at z-index 3, ball at 4, type at 1, utility navigation at 8.
  
  Set an original two-line, left-aligned service statement around x=40px and y=715px in a dark Riposte face at ~37px, ~1.28 line-height; add a shorter bold line about 38px below it. Counterweight this with a small right-aligned mono descriptor around x=1710px, y=710px. Put tiny mono contact metadata at lower left and a location/time-style readout at lower right. Use entirely original text. The small labels should be around 14px, letterspaced lightly, and almost severe against the playful art.
  
  Reproduce the observed life through only the ball’s moving seam geometry. A practical approach is an SVG with a circular clipPath and a group of seam paths that slowly rotates/recomposes, or a canvas/video layer at the same 1.98:1 stage ratio with a transparent ball area. Keep the coral silhouette stationary, preserve the finger-to-ball contact point, and avoid a literal spinning texture if it looks mechanically perfect. The rest of the poster should stay still. Respect prefers-reduced-motion by showing a static but fully drawn ball with an alternate seam arrangement.
  
  Use semantic header, main, nav, buttons and links. Ensure contrast for black text over green; make targets at least ~44px. Use CSS transforms for animation, contain paint/layout where useful, pause decorative updates offscreen, and load the illustration with explicit width/height to prevent layout shift. Prefer inline SVG and DOM for this flat composition; reserve the existing canvas-like scene only for the isolated changing ball if it produces a cleaner animation. Do not add testimonials, portfolio cards, a conventional hero CTA, scroll-jacking, shadows, or extra ornamental objects.

• Build frontend
• Generate assets
• Add animations
• Responsive polish
• Final visual polish

These prompts describe a visual language: composition, rhythm, type scale and motion. Build with your own branding, copy, logos and imagery — the design and content of Juice Agency belong to their authors.

Agent

Claude Code

Model

Claude Fable 5.1This is a high-fidelity, single-page poster composition with a custom vector scene and restrained looping motion, best served by careful CSS/SVG implementation rather than advanced 3D tooling.

The flat vector system, broad typographic composition and isolated looping motion reproduce reliably with current tools; the main remaining challenge is matching the charm and line quality of the bespoke illustration.