code-anything.com
Log inStart free
Animated

Vellum

Vellum is a kinetic, line-art template for motion and design studios, agencies and interactive product tours. It lays everything on warm vellum paper with a faint ruled-line texture, then animates inline SVG: contours draw themselves in via stroke-dasharray, headlines shift kinetically, a hand-drawn blob morphs, and a single continuous "thread" line draws itself down the page as a spine. A small generated-video accent — rendered through fal.ai on the phi-cloud gateway — sits beside the drawn artwork, with an in-app control to regenerate it. No photography anywhere; every visual is pure SVG and CSS, so it stays razor-sharp at any size and honours prefers-reduced-motion.

Ink on warm paper that moves — editorial line-art that draws itself in, kinetic type and a single thread stitching the page top to bottom.

vellum-svg.code-anything.app
Kinetic line-art studio

Lines thatdrawthemselves.

An editorial, ink-on-paper site for motion and design studios — contours that ink in on scroll, a morphing blob, kinetic type and a single continuous thread that stitches the whole page together.

Ink ribbon · flowbezier · draw + drift
Form + moving image

A drawn shape that breathes, beside a clip you can generate.

Generated clip · loop
fal.ai · phi-cloud
What it ships

Three drawn ideas

Self-drawing line-art

Every contour is an SVG path that inks itself in as it enters the frame — stroke-dasharray choreography, no raster art anywhere.

Kinetic editorial type

Display headlines slide, weight-shift and settle on a ruled baseline grid, so the page reads like a moving magazine spread.

Generated video accents

Drop a looping clip into any tile and regenerate it on demand — rendered through fal.ai on the phi-cloud gateway.

Follow the thread

A page in four strokes

  1. 01

    Ink meets paper

    The page opens on warm vellum. A single continuous line begins to draw itself across the fold, tracing the shape of the story before a word is read.

  2. 02

    The thread descends

    That one line never lifts. It snakes the length of the page — a spine you follow downward, stitching each section to the next as it draws and erases on a loop.

  3. 03

    Form finds motion

    A hand-drawn blob breathes and morphs beside a generated clip, proving that line-art and moving image can share the same quiet, editorial frame.

  4. 04

    Sign off

    The contour resolves into a signature and the invitation appears — begin a build, or generate a fresh video accent in a single click.

1
Continuous drawn thread
0
Photographs used
∞
Looping, reduced-motion safe
fal.ai
via phi-cloud gateway

Draw your story. Then generate its video.

Describe the accent clip and let the studio render it in place — regenerate as often as you like.

Generate video

Powered by fal.ai · phi-cloud

Design rules

The system, applied to any site

  • Work on warm vellum paper (#F4F1EA) with near-black ink text (#14110D) and a faint ruled-line / grain texture from low-opacity repeating-linear-gradients — keep contrast strong so ink stays crisp on paper.
  • Lead with inline SVG line-art: draw every contour, icon and signature by animating stroke-dasharray / stroke-dashoffset from the path length down to 0, triggered as the element enters the viewport (IntersectionObserver or scroll progress).
  • Run one continuous "thread" — a single SVG path — that draws itself down the full length of the page, tracking scroll, acting as the visual spine linking every section.
  • Pair a morphing SVG blob (animate the path d, or a slow CSS rotate/scale loop) with a small simulated or generated video tile so hand-drawn form and moving image share one editorial frame.
  • Set kinetic editorial type in Space Grotesk display over an Inter body on a ruled baseline grid; let headlines rise and settle, and use electric-ink blue (#2C4CF6) and vermilion (#E8462B) only as sparing accents.
  • Never use photography — compose everything from inline SVG paths and CSS; keep all motion looping and gated behind prefers-reduced-motion so it degrades to a clean static drawing.

Ships with

Nav with a self-drawing line-art wordmarkHero: kinetic headline + large self-drawing contour / constellationFull-width self-drawing "thread" spineMorphing SVG blob paired with a generated-video tile3-up feature cards with draw-on line iconsNumbered scroll-narrative, stat band, Generate-video CTA and footer

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Space Grotesk

Body

Inter

Radius

10px

Explore palettes

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.