Skip to content

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. 1. CopyUse “Copy Claude Prompt” above. It includes the layout, the spring values and the design rules.
  2. 2. Paste into ClaudeAdd your own brand name, copy and colors at the top of the prompt if you like.
  3. 3. Drop it inYou get one file with React, Tailwind and Framer Motion. Install framer-motion and lucide-react.