Skip to content
Bones
Example 01

Bones / a gallery of captured sites, rebuilt

Keep the
bones.

A premium scroll site has a skeleton: its structure, its scroll grammar, its interaction patterns, its type scale. We capture that skeleton, then put our own skin on it.

How it works

  1. Capture

    Record the live site's rendered DOM, computed styles and scroll behaviour as ground truth.

  2. Map the bones

    Write down the structure, scroll grammar, interaction patterns and type scale. Nothing visual yet.

  3. Skin it ours

    Rebuild on our tokens: own name, palette, free fonts, generated imagery, original copy.

The gallery

4 live / 1 open

Strata Week home page: a flare-red hero with a huge two-line title, layered wave planes and a mint panel with a contour diagram.

Example 01 / Event festival site / 3 pages

Strata Week

A premium scroll-driven event site, captured and rebuilt. Same structure, same scroll grammar, same interaction patterns. Different name, palette, type, imagery and copy.

Open the rebuild FlagshipThe Week

Patterns

  • Repeated-word marquee headings
  • Custom cursor
  • Scroll-pinned horizontal slider
  • Speaker grid to modal
  • Scroll-linked layered hero
  • Pause-motion switch

Bones kept

  • Section order and page map
  • Marquee, pinned slider, modal, cursor
  • Display scale: one huge line, tight tracking
  • Mono labels for meta and nav

Skin, ours

  • Name, dates, city and every word of copy
  • Palette: flare, mint, ink, paper
  • Space Grotesk and JetBrains Mono, self-hosted
  • Generated art, placeholder portraits and marks
Kinlet home page: a white page with a huge indigo headline, Everything that moves, connected, over a generated isometric dot-map with a pink-and-indigo node graph.

Example 02 / IoT connectivity site / 3 pages

Kinlet

An ultra-minimal, airy-white corporate-tech site, captured and rebuilt. Same structure, same pinned scroll act, same map-and-node motif. A different company, palette, typeface and map.

Open the rebuild PlatformEcosystem

Patterns

  • Pinned scroll act with a node graph
  • Generative aerial dot-map
  • Isometric node and connector graph
  • Custom cursor
  • Scroll-lit headline
  • Pinned horizontal rail
  • Directory to constellation
  • Pause-motion switch

Bones kept

  • Section order: hero, drivers, twin, pinned heart, platform, ecosystem, careers, contact
  • Huge airy editorial headlines on white
  • Pinned scroll scene at the centre of the page
  • Map backdrop with a node and connector graph

Skin, ours

  • Name, copy, partners and every figure
  • Palette: white, indigo, hot pink
  • Hanken Grotesk and DM Mono, self-hosted
  • Map and graph generated at runtime from a seed
Lathe home page: a signal-red field with a mono grid-label row, a black headline, a band of black twisting stripes and a giant LATHE wordmark anchored to the bottom edge.

Example 03 / Software studio site / 3 pages

Lathe

A confident brutalist agency site, captured and rebuilt. Same structure, same giant bottom-anchored wordmark, same animated stripe band and mono grid labels. A different studio, palette, typeface and stripe art.

Open the rebuild ExpertiseApplied AI

Patterns

  • Generative stripe band (canvas)
  • Giant bottom-anchored wordmark
  • Mono grid-label row
  • Scroll-lit statement
  • Wipe-in media plates
  • Pinned horizontal rail
  • Pinned loop scene
  • Discipline filter
  • Pause-motion switch

Bones kept

  • Section order: hero, studio, expertise, services, work, method, notes, contact
  • Black on a warm red field, ruled like a spec sheet
  • One huge wordmark anchored to the bottom edge
  • An animated stripe band as the hero floor

Skin, ours

  • Name, copy, clients and every figure
  • Palette: ink, signal red, bone
  • Archivo and Space Mono, self-hosted
  • Stripe band and plates generated at runtime from a seed
Sablemoor home page: a full-bleed dusk photograph of a links fairway and sea under a huge uppercase headline, Built for the long round, with Par 72, 18 Holes and Est. 1924 in serif italic along the bottom.

Example 04 / Golf club site / 3 pages

Sablemoor

A cinematic, photo-led country-club site, captured and rebuilt. Same structure, same full-bleed hero with serif stat marks, same scroll-reveal image sections. A different club, palette treatment, copy and generated photography.

Open the rebuild CourseMembership

Patterns

  • Full-bleed photo hero with serif stat marks
  • Masked headline rise
  • Scroll-lit statement
  • Wipe-in photographs
  • Pinned horizontal rail
  • Pinned hole-by-hole photo scene
  • Parallax photo bands
  • Tee and billing switches
  • Pause-motion switch

Bones kept

  • Section order: hero, club, grounds, signature holes, voices, membership
  • Full-bleed photograph with PAR, HOLES and EST. marks in serif
  • Huge tight uppercase display headlines with serif accents
  • Scroll-reveal image sections and a membership call to action

Skin, ours

  • Name, copy, holes and every figure
  • Treatment: ink, bone and one dune-grass gold
  • Archivo Black, Instrument Serif, Inter and IBM Plex Mono, self-hosted
  • Every photograph generated, none sampled from the source

Open slot

Example 05

Open slot. The next captured site lands here once its bones are mapped.