168
AI ready

Blueprint to Product Scroll

£7
or the whole Vault, £99
Skip the demo Open in new tab

A pinned scroll scene where a technical drawing of a product draws itself with a pen tip, adds counting dimensions and numbered callouts, then becomes the product photograph through a hatching mask.

ScrollTriggerDrawSVG Lenis advanced
6 more details
svg-line-drawpinningscrubmask-revealcount-upvelocity-reactive

Released

About this effect

Blueprint to Product Scroll tells a product's story as a drawing that turns into the real thing. The scene pins and the scroll drives a pen: faint construction lines cross the sheet, then the product's outline traces itself stroke by stroke with a pen tip riding the end of the line. Dimension lines extend from their midpoints with the measurement counting up as each one lands and arrowheads snapping in, and numbered callouts draw leader lines out to the parts and materials.

Read the full effect overview

Then the photograph arrives inside the drawing: hatch lines grow out from one point across the frame and thicken until they merge into the full shot, so for a moment the blueprint and its dimensions sit over a half-revealed photograph. The linework thins to an overlay, the dimensions retract, and the clean product shot is left with its callouts. Scroll back and it all runs in reverse. The drawing and the photograph share one SVG coordinate system, so the linework stays registered to the product at every size.

Blueprint to Product Scroll - GSAP animation effect preview

What's included

8 items
  • Pinned, scrubbed sequence: construction lines, outline, dimensions, callouts, photograph, then the clean shot, fully reversible
  • Outline drawn with GSAP DrawSVGPlugin one stroke at a time, time shared by path length, with a pen tip that follows the active stroke
  • Dimension lines that grow from their midpoints while the number counts up to its value, with arrowheads that snap in with an overshoot
  • Numbered callouts with leader lines and labels; on portrait screens the labels become a numbered legend that fills in as each callout lands
  • Photo reveal through a generated hatching mask that floods out from a point you choose and thickens into the full frame
  • Fast scrolling knocks a ghost of the linework off register; it springs back once the scroll settles
  • Reduced motion shows the finished product shot with callouts and a Show drawing toggle; without JavaScript the shot and labels are visible
  • One revert() call removes the pin, the generated hatch, the ghost and every inline style, leaving the markup as authored

Perfect for

5 use cases
  • Furniture and homeware product pages that want to show the design behind a piece
  • Hardware, tool and industrial design launches that sell precision and dimensions
  • Architecture and joinery studios presenting a made object from drawing to finished piece
  • Crowdfunding and product story pages walking from prototype drawing to the shipped item
  • Portfolio case studies for industrial and product designers

How it works

2 sections

The demo is one SVG whose units are the pixels of the source photograph, so the traced outline, the dimensions and the photo stay aligned however the SVG scales. Landscape screens show the whole 16:9 drawing; portrait screens slice the sides so the product is drawn larger and the side labels move into a legend.

A ScrollTrigger pins the section and scrubs one GSAP timeline. DrawSVGPlugin draws the construction lines and each outline path in turn, a helper places the pen tip at the current end of the active path, and the dimensions draw from their midpoint while a counter updates the measurement. The photograph sits behind an SVG mask: the script fills it with 45 degree hatch lines, draws each from the point nearest the flood origin, then widens them until they cover the frame. Scroll velocity drives a live copy of the outline that slips off register and settles back with an elastic ease.

Plugins ScrollTrigger, DrawSVG
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the scene (shortened; index.html has the full chair):

In your downloadThe working code for this step, in index.html.

Using It With Your Own Design

One coordinate system. The photograph, the drawing and the dimensions all live in one SVG, and its units are the pixels of your source photo at a working size (the demo uses the photo at 1200 px wide). Because they share the SVG's viewBox, the drawing stays registered to the product at every screen size. To use your own product:

  1. Pick a photo with a clear silhouette on a plain ground. Decide the working width (say 1200 px) and crop the panel the photo will fill, for example x 352 to 812, y 175 to 675.
  2. Export that crop as your image (at 2x for sharp screens) and place it with an <image> whose x, y, width and height are the crop in working pixels. Give the mask's fill rect, the mask itself and the construction frame the same box.
  3. Trace the outline in any vector editor over the photo at its working size (or read edge positions off the pixels), and paste the paths into [data-bp-outline] without transforms. While tracing, set .bp-photo to opacity: .5 and the outline to visible to check registration at both a wide and a phone crop.
  4. Set the viewBox to the area you want on wide screens at 16:9, centred horizontally on the product. Portrait screens use slice and keep the middle, so keep the balloons within about 180 units of the centre line.

Which paths are which. The script reads structure only from data- hooks:

Hook Role
[data-bp] The section that pins. Holds the options below.
[data-bp-svg] The SVG with everything else in it.
[data-bp-grid] The faint grid, visible at the start and faded out at the end.
[data-bp-construct] Construction lines. Each child is drawn in turn, first.
[data-bp-outline] The product outline. Each child path is one pen stroke.
[data-bp-dim] One dimension: [data-bp-ext] extension lines, [data-bp-dim-line] half-lines drawn from their start point (put the start in the middle), [data-bp-arrow] arrowheads and one [data-bp-tag].
[data-bp-value] The number in a tag; it counts up from 0 to this value.
[data-bp-callout] One callout: [data-bp-anchor] dot, [data-bp-leader], [data-bp-balloon] circle, its number text, and an optional [data-bp-label] group with a [data-bp-tail] and the label text.
[data-bp-fill], [data-bp-hatch] Inside the photo's <mask>: the finished full-white rect, and the empty group the script fills with hatch lines.
[data-bp-pen] The pen tip that rides the active stroke. Optional.
[data-bp-legend-item] Readable callout text; fades in with the callout of the same index.
[data-bp-cue], [data-bp-toggle] The scroll cue, and the reduced-motion Show drawing button. Both optional.

How order is set. Outline strokes draw in document order, and each stroke's share of the outline time is proportional to its length, so a long rail takes longer than a short cap. Order them the way a pen would move: down a post, across a rail, on to the next member. Add data-bp-order="3" to a path to override its position without moving it in the markup. Draw direction follows each path's own direction, so reverse a path's points to make the pen travel the other way. A path may contain several M subpaths; it is still one stroke, and the pen hops between them. Dimensions and callouts run in document order too.

Arrowheads and tags. An arrowhead is an open V of three points whose middle point is the tip: the script scales it from there. A tag is an outer [data-bp-tag] group (the one that pops) around an inner group that does any translate or rotate.

What is only the demo's styling: fonts (Mona Sans and JetBrains Mono), the dark ground, the off-white linework, the orange-red dimension accent, the product name bar and the legend's two-column layout. Change the custom properties at the top of style.css.

CSS the effect depends on:

  • .bp must be exactly one viewport tall with overflow: hidden; it is the pinned element.
  • The drawing layers (.bp-grid, .bp-construct, .bp-outline, .bp-dims, .bp-pen) are opacity: 0 by default so no-JS and reduced-motion visitors see the finished shot; the script arms them.
  • Under .has-js with motion allowed, .bp-mask__fill and .bp-callout start at opacity: 0 and legend items at 0.22, so nothing flashes before the script runs. Keep these gates if you rename classes.
  • Stroke widths and font sizes in the SVG are in SVG units, so they scale with the drawing.
  • The mask needs a unique id per scene on the page if you place more than one.

Options

Attribute Values Default Description
data-bp-distance Number of viewport heights 4 Scroll length of the pinned scene
data-bp-scrub Seconds, or true 0.6 How long the scene takes to catch up with the scrollbar
data-bp-origin x,y in SVG units Centre of the photo Point the hatching floods out from
data-bp-hatch SVG units (3 or more) 7 Gap between hatch lines
data-bp-jitter 0 and up 1 Strength of the velocity overdraw; 0 turns it off
data-bp-final-outline 0 to 1 0 Opacity the outline keeps over the finished photograph

Accessibility

  • Reduced motion: no pin and no scroll animation. The finished product shot shows with its callouts, and a native Show drawing button overlays the static drawing and dimensions. It reports its state with aria-pressed.
  • No JavaScript: the photograph and the callout labels are visible; the drawing layers stay hidden.
  • Screen readers: the SVG is one image with a <title>; the callouts are read from the <ol> legend, which is visually hidden on wide screens and shown on portrait ones.
  • Keyboard: the scene is driven by normal page scrolling, so arrow keys, Page Down and Space all play it.
  • Touch: native scrolling drives the same timeline; portrait screens get the larger drawing and the legend.

Image Credit

The demo photograph is Pexels photo 12965306, a slim chair on an olive ground (https://www.pexels.com/photo/12965306/), used under the Pexels License (https://www.pexels.com/license/). assets/img/chair.webp is a cropped, regraded derivative baked from the source by assets/img-manifest.json. Replace it with your own product photograph and retrace the outline.

Dependencies

Required:

  • GSAP 3.12+ (the demo is built against 3.15.0)
  • ScrollTrigger
  • DrawSVGPlugin (free on the GSAP CDN)

Optional:

  • Lenis 1.3+ for smooth scrolling (the demo uses 1.3.17). Add ?smooth=off to the URL or data-smooth="off" on <html> to compare without it.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7