Skip to content

Full Website Designs · Wheel-Thrown

Lenta Ceramics Studio Shop

A tactile shop for a one-wheel pottery studio in Mitzpe Ramon: a speckled vase that keeps turning on the wheel and reshapes under the pointer, glazes that pour over a big bowl, and a kiln firing curve that draws itself as the page heats up.

  • Full Site
  • E-commerce
  • Tactile
  • Illustration

The full prompt

Show the prompt that defines the layout, motion and design language
Build a "Lenta Ceramics Studio Shop" React component.

CONCEPT: The shop of Studio Lenta, a two-person pottery in Mitzpe Ramon that digs its own clay and opens one kiln every second Thursday. Everything should feel handmade and slow: speckled clay, drips of glaze, pebbles drifting. The signature moment is a vase on a potter's wheel that is actually turning and that you can shape with the pointer.

LAYOUT & CONTENT:
- Nav: 'Lenta.' in italic serif with a clay-coloured full stop; Shop / Glazes / Classes / Visit; a bag icon with a live count.
- Hero: left, 'Thrown slowly, fired twice.' (second half italic, clay colour), one sentence about the crater and the kiln, a pill 'Shop this kiln' button in celadon and a link 'Wheel classes'. Right, a 560×600 arch (rounded-t-full) in warm sand with a fractal-noise wall texture; inside, the wheel: a vase profile built from cubic curves (foot, belly, neck, lip), a clay body gradient lit from the left, a celadon glaze dipped over the top half with a dripping lower edge, throwing rings and ~170 speckles. A small italic caption 'On the wheel now: a vase for the November kiln' and 'Move across the clay to shape it'.
- From the October kiln: an asymmetric grid, one tall card (2 rows) and four small ones, each a different SVG piece (crater bowl in tenmoku, tall vase in wood ash, cup in shino, plate in celadon, bud vase) with speckle texture, name, size, and a pill price button that adds to the bag; one piece marked 'Sold, next kiln'. The tall card carries a quote from the potter.
- Glazes: a large bowl beside a radio group of four glaze swatches (Celadon, Tenmoku, Shino, Wood ash). Choosing one recolours the bowl and swaps a one-line description and firing temperature.
- Kiln: a full-width dark band 'Thirty-two hours in the kiln, and we do not open early.' with a firing chart (0-32h, 0-1,300°C): a smooth curve through real points (water smoke at 105°C, quartz inversion at 573°C, glaze melt at 1,100°C, peak 1,240°C held 20 min, slow cool).
- Classes: three rows (name, schedule, date, price, seats left / 'Full').
- Footer: 'Come see the wheel.' in large italic, address on Har Ardon, opening hours, email.

INTERACTIONS & MOTION:
- The wheel: useAnimationFrame drives a time MotionValue; pointer x/y (scaled-preview safe: measure the box) feed springs (stiffness 40, damping 14). The profile, glaze edge, rings and speckles are all useTransform outputs, so nothing re-renders React per frame. Speckles live at (height, angle) on the pot; each frame their angle advances and x = centre + radius(y)·sin(θ), drawn only when cos(θ) > 0.15, so the pot genuinely turns. The profile breathes ±8px on a 11s sine even when nobody touches it. Wheel-head ticks rotate on the visible half of an ellipse.
- Pebbles: three speckled stone shapes drift on 26-34s loops.
- Shop cards: whileHover lifts the piece 10px and tilts ±2° on a spring (stiffness 200, damping 18); the bag count pops with a spring.
- Glaze: fill colours tween over 0.8s; a soft highlight slides across the bowl every 9s; the selected swatch ring is a shared layoutId.
- Kiln: useScroll on the section maps progress to the curve's pathLength; each annotation fades in as the line reaches it; the band's background warms from umber to ember and back.

DESIGN SYSTEM, Wheel-Thrown:
- Oat #EEE6D8, umber ink #2E241D, clay #B5643C (illustration and emphasis), one accent celadon #5E8C78 for actions, sand #E0D0B8, ember #E7A07A on the dark band.
- Alegreya (500 for display, italic for emphasis) and Alegreya Sans for text. Display 5.6rem.
- Soft 20px card radius, pill buttons, arch shapes; 9% paper 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.