Full Website Designs · Jet Set Departure
Paloma Jet Charter Website
A retro jet-set charter site where split-flap tiles clatter to each new destination, a route arc draws across a dotted Mediterranean while a little jet flies it, the departures board keeps rolling, and a boarding pass lets you tear off the stub.
- Full Site
- Travel
- Split Flap
- SVG Draw
- Drag
The full prompt
Show the prompt that defines the layout, motion and design language
Build a "Paloma Jet Charter Website" React component.
CONCEPT: Paloma is a fictional private jet club flying from Tel Aviv's private terminal to Nice, Mykonos, Olbia, Geneva and Marrakech. 1960s jet-set warmth: cream paper, tomato red, a Bodoni headline and an airport board that never stops flipping.
LAYOUT & CONTENT:
- Nav (70px, cream): 'Paloma.' in Bodoni italic with a tomato dot, links Routes / Fleet / Empty legs / Membership, a dark 'Request a flight' pill.
- Hero (cream): 'Your plane leaves / when you do.' at 6.6rem (second line italic tomato), a short mono line on the right (140 airports, quote in 20 minutes). Below, a dark-brown board panel: 'NEXT DEPARTURE, BEN GURION PRIVATE TERMINAL', 'GATE P4', big split-flap 'TLV -> NCE' in 74x104px yellow-on-brown tiles, a 2x2 block of small flaps (DEP, ARR, TIME, FROM ₪) and an italic 'Tel Aviv to Nice' line.
- Empty-legs marquee: yellow band of italic serif offers (Nice to Tel Aviv, Thu 16 Oct, ₪9,900...).
- Route map (dark brown): a dotted Mediterranean drawn as SVG polygons filled with a dot pattern, TLV pulsing in yellow, five destinations with codes, dashed faint arcs to each. Right: 'Where to?' and a list of cities with flight times.
- 'Today from Tel Aviv': a full departures board (time, destination, flight, status) in small flaps with a pale centre seam on every tile.
- Boarding pass (sky blue section): a cream pass with TLV and NCE in 5.6rem Bodoni, a dashed arc, a barcode, a dashed perforation and a tomato stub '1A'.
- Fleet: three rows (Light, Midsize, Long range) with a side-view jet silhouette in SVG, seats, range and hourly price.
- Footer: tomato block with 12rem italic 'Paloma' and ops desk, email, terminal.
INTERACTIONS & MOTION:
- Split-flap (signature): each tile steps through the alphabet ' A-Z 0-9 : - .' one character every 38ms until it reaches its target (real flaps cannot jump), with a quick rotateX flip per step and per-tile delay (60ms stagger). On load every tile starts blank so the page clatters in. The hero route changes every 4.2s.
- Route map: the active arc draws with pathLength over 2.6s (ease-in-out) and a small yellow jet travels it: position and heading from getPointAtLength, scale swelling to 1.5x mid-flight. Hovering or clicking a city takes over from the auto-cycle and updates hero and map together.
- Board: rows rotate every 3.6s so flaps re-flip; 'BOARDING' blinks.
- Boarding pass floats on a 5s loop. The stub is draggable on x; past 90px it tears away (exit: x 260, y 220, rotate 28deg, 0.7s ease-out), 'See you on board.' appears, and the stub returns after 2.6s. Enter also tears it for keyboard users.
- Fleet jets slide 60px forward on row hover (spring stiffness 160, damping 16). Empty-legs marquee loops linearly over 30s.
DESIGN SYSTEM, Jet Set Departure:
- Cream #F1E9DA, brown #1E1A17 / board #2A2420, tomato #E4472B, flap yellow #FFC21A, sky #9CC9E3.
- Bodoni Moda 500-600 with its italic for display, IBM Plex Mono 400-600 for UI, data and every flap. 18px panel radii, pill buttons.
CRAFT RULES:
- Motion: Framer Motion with spring physics (type: "spring") for anything interactive; ease-out cubic-bezier(0.23, 1, 0.32, 1) for entrances, ease-in-out cubic-bezier(0.77, 0, 0.175, 1) for on-screen travel, linear only for constant loops. Animate transform, opacity, clip-path and pathLength only. Drive per-frame values with MotionValues (useAnimationFrame, useTransform) so nothing re-renders React every frame. Respect prefers-reduced-motion via useReducedMotion(): loops, cursor effects and tickers become static.
- Ambient life: the page must visibly move within the first second without any interaction.
- Cursor maths inside a scaled container: convert with (clientX - rect.left) / (rect.width / el.offsetWidth).
- Copy: real, specific names, prices and times; no em-dashes, no lorem ipsum, no eyebrow label above every heading.
- Icons: lucide-react where icons are needed; illustrations are inline SVG or CSS, no external images, no real brands or trademarks.
- Accessibility: real <button>/<a>/<label> elements, visible focus ring, keyboard operable, aria-pressed / aria-label where state changes, text contrast at least 4.5:1, tabular numerals for times, scores and prices.
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 any Google Font 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.