Full Website Designs · Seasonal Estate
Clos Verane Winery Website
An atmospheric site for a family winery in the Upper Galilee: a dusk panorama whose sky, sun and window light shift on a slow loop, vine rows sweeping over the hill, a shelf of bottles, and one vine that lives through a whole year as you scroll.
- Full Site
- Restaurant
- Parallax
- Illustration
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "Clos Verane Winery Website" React component.
CONCEPT: The website of Clos Verane, a family estate near Kerem Ben Zimra in the Upper Galilee: eleven rows of Syrah and Cabernet Franc, a cellar dug into the slope and a long table for twenty-four. Calm and classic, but the light is always moving. The signature moment is a vine that goes through a whole year, March to December, as you scroll past it.
LAYOUT & CONTENT:
- Nav: 'Clos Verane' in serif; Wines / The year / The table / Visit; a dark 'Book a tasting' button.
- Hero: 'Eleven rows on one hill in the Galilee.' (second half light italic) on limestone, a one-sentence intro to the right. Under it, a full-width 560px panorama in SVG: dusk sky gradient, a sun with a soft halo, two hill layers, a farmhouse with a lit window and four cypresses on the crest, a mist band, and a vineyard of 23 rows converging to a vanishing point beyond the crest (each row a tapered green band with a lit edge), a raking light band crossing the field, and a foreground vine with palmate leaves and a grape cluster.
- Wines: 'Five wines, about 9,000 bottles a year.' and a shelf of five SVG bottles (Bordeaux, Burgundy and half-bottle silhouettes, each its own glass colour, cream label, red capsule, a fixed highlight gradient). Below the shelf, one shared panel shows the selected wine's name, grape and vintage, tasting note in italic and price.
- A year on the hill: a trellis with one trunk, cordon and seven shoots; a large month name in italic top-right; four stages below (March Budbreak, May Flowering, August Veraison, September Harvest).
- The table (deep plum band): 'The long table, under the oaks.', days and price (₪420 a guest, ₪160 with the wines), a candle; and a numbered five-course autumn menu.
- Visit: 'Book a tasting', what it includes, address and drive times; a form with six date buttons, a guest stepper and a submit button that shows date, time and total (₪110 a guest).
INTERACTIONS & MOTION:
- Panorama: sky gradient stops animate between golden hour and dusk (14s, mirror); the sun sinks 46px on the same loop and the farmhouse window lights up as it goes; birds glide across in 38s; cypresses and foreground leaves sway ±1-3° on 3-4.5s mirror loops with staggered delays; the mist drifts; a soft-light raking band crosses the field every 17s. Pointer x adds three parallax depths on a spring (stiffness 40, damping 16).
- Year: useScroll on the section (offset ['start 0.7', 'end 0.4']) smoothed by a spring. Leaves scale up from buds, turn from spring green to deep green to amber to rust, then fall 90px and fade; grape clusters grow, turn from green to purple at veraison and vanish at harvest; the background and the sun height change with the season; the month label is a MotionValue rendered directly; the active stage is full opacity.
- Bottles: hover or focus lifts the bottle 18px and tilts it -3° on a spring (stiffness 160, damping 16); the panel crossfades.
- Booking: selected date is a shared layoutId block; the guest number drops in on change.
DESIGN SYSTEM, Seasonal Estate:
- Limestone #EFE8DC, plum ink #2A1A24, one accent must red #8C2F39, vine greens #4E5E33 and #8E934E, harvest gold #C99A4E, muted #5E4D55.
- Cormorant Garamond (400 display, light italic for emphasis) and Jost for UI. Display 5.6rem, line-height 0.92.
- Square buttons, hairline rules, illustration in flat shapes with no outlines; 6% grain.
CRAFT RULES:
- Motion: Framer Motion. Springs (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances; UI feedback under 300ms, exits faster than entrances. Ambient loops are slow (6s and up) and never pulse in sync. Animate transform, opacity, clip-path and SVG attributes only. Respect prefers-reduced-motion via useReducedMotion(): loops and parallax become static, fades stay.
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow labels over every heading.
- Icons: lucide-react where icons are needed; every illustration is inline SVG, no external images.
- Accessibility: real <button>/<a>/<label>/<form> elements, visible focus rings, keyboard operable, aria-pressed / aria-selected / aria-live where state changes, tabular numerals for prices, times and measurements.
OUTPUT: one self-contained React component file (Tailwind CSS v4 utility classes, framer-motion, lucide-react), no external images, default export, ready to paste into a Next.js App Router page with "use client". Load the Google Fonts it needs with next/font/google.How to use this prompt
- 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
- 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
- 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.