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. 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.