code-anything.com
Log inStart free

Animated

Vellum

Vellum is a product landing page for a premium e-paper writing tablet — a distraction-free digital notebook with a paper-like display and a stylus. It opens with a pinned, muted, looping hero video whose scroll drives a sequence of product beats (a display that reads like the printed page, 9ms pen latency, weeks of battery, silent handwriting sync), then flows into a real page: a sticky nav with a pre-order button, a spec/feature grid (display, stylus, battery, sync, weight), a device gallery of real resolving photography, a novelist testimonial with a stat band, and a pre-order pricing card at $399. The whole thing sits on warm vellum paper with a faint ruled-line texture, and keeps the signature ink-on-paper motif — self-drawing SVG strokes (via stroke-dashoffset) that ink themselves in, plus a continuous thread that draws down the page. Every animation is pure CSS/SVG and honours prefers-reduced-motion.

Warm ink-on-paper calm for a premium e-paper writing tablet — self-drawing SVG strokes, a matte-paper aesthetic and restrained slate/vermilion ink, with a pinned cinematic hero clip carrying the product story.

vellum-svg.code-anything.app
VellumPaper you never refill.A distraction-free writing tablet with a display that reads like the printed page.
Why Vellum

The calm of paper. The memory of a computer.

Vellum is a single-purpose device for people who think by writing. No feeds, no notifications, no glow at midnight — just a warm e-paper surface that holds every page you ever put on it, and hands it back as searchable text.

Built to last, not to distract

Everything that matters, nothing that doesn’t.

E-paper display

10.3-inch matte panel, 300 ppi, front-lit with a warm amber glow you can dim to zero.

Vellum stylus

4,096 pressure levels, 9ms latency, magnetic dock. Tilt to shade, flip to erase.

Six-week battery

2,800 mAh cell. Power stays put for weeks; a 30-minute charge covers a full month.

Silent sync

Handwriting turns to searchable text and lands in your notes app over Wi-Fi — no cables.

<8oz in hand

An aluminium frame at 218 grams — thinner than a legal pad and balanced for long sittings.

Endless pages

Unlimited notebooks and templates. Nothing to buy, nothing to run out of, nothing to lose.

In daily use

A desk companion, not another screen.

Slim enough for a jacket pocket, matte enough to read in full sun, quiet enough to leave on the desk all day.

Morning pages
Morning pages
Ink & margin
Ink & margin
The writing desk
The writing desk
A reading light
A reading light

“I drafted an entire novel on Vellum without once opening a browser tab. It’s the first device that gets out of the way of the sentence.”

Mara Ellison · Novelist & Vellum owner
9ms
Pen-to-ink latency
42 days
Typical charge cycle
300 ppi
Paper-grade sharpness
218 g
In the hand
Founding edition · ships this autumn

Reserve yours for $399.

A refundable $50 deposit holds your place in the first run. Every founding order includes free engraving, a spare nib set, and a linen folio.

  • Vellum tablet + stylus
  • Two-year ink-warranty
  • Free shipping worldwide
  • 30-night return, no questions
Deposit today
$50refundable
$349 balance when it ships
Reserve my Vellum
4,200 reserved · limited first run

Design rules

The system, applied to any site

Every rule below travels with the template — describe your tweaks and the agent keeps the system intact.

What it decides for you

  • This is a real product page for Vellum, a premium e-paper writing tablet (a distraction-free digital notebook with a paper-like display and a stylus). Every headline and paragraph is about the DEVICE — the paper-feel display, handwriting, battery weeks, sync, weight, price/pre-order — never about scrolling or the animation itself.
  • Open with a pinned, MUTED, LOOPING hero video (a hand writing on a matte e-ink tablet). The clip plays at native rate; scroll only advances a sequence of product beats (display, stylus latency, battery, sync, pre-order). Do not scrub the video.
  • Sit everything on warm vellum paper (#F1ECE1) with near-black ink text (#191510) and a faint ruled-line / grain texture from low-opacity repeating-linear-gradients — keep contrast strong so ink stays crisp on paper.
  • Keep the signature ink motif: draw contours, the wordmark, spec icons and a page-spine "thread" by animating stroke-dasharray / stroke-dashoffset so each SVG path inks itself in. Use slate-indigo (#324B77) and muted vermillion (#B24A32) only as sparing accents.
  • Use real, product-adjacent photography (notebooks, writing, desks) real product photography GENERATED with the generate_image tool and written into the app (never hot-linked from a stock-photo CDN, and never a photograph of a real, branded product) in the device gallery — never an empty frame.
  • Set editorial type in Space Grotesk display over an Inter body; premium real copy, no lorem, no emoji icons (inline SVG only). Keep all motion looping and gated behind prefers-reduced-motion so it degrades to a clean static drawing. The ScrollStory hero relies on position:sticky, so the root element must NOT set overflow.

Ships with

Sticky nav: self-drawing line-art wordmark + Pre-order buttonPinned, playing hero clip whose scroll reveals product beats (display, stylus, battery, sync, pre-order)Full-width self-drawing "thread" spine + intro statementSix-up spec/feature grid with draw-on line icons (display, stylus, battery, sync, weight, storage)Device gallery of real notebook/desk/writing photographyNovelist testimonial + stat band (latency, battery, ppi, weight)Pre-order pricing card ($399 / $50 deposit) and footer

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Space Grotesk

Body

Inter

Radius

14px

Explore palettes

Keep looking

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.