Skip to content

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