Pulsar
Blueprint sweep

Blueprint Sweep

CSS

A vertical drafting rule travels across the sheet and leaves a fully drawn gridded panel behind it.

Tier
CSS
Dependencies
None
Duration
1.2 s, plays once
Categories
Transitions and reveals
Use cases
Search and filtering, Transitions and reveals
Industries
SaaS and software, Cross-industry
Style
Technical · hairline stroke
Set
blueprint
Tags
wipeone-shotlinegridminimal
Themeable
Yes. Inherits currentColor and reads --pulsar-accent.
Version
1.0.0, added 2026-09-09
Licence
To be confirmed. See the repository LICENSE.

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="blueprint-sweep-title" class="pulsar pulsar-blueprint-sweep" data-pulsar="blueprint-sweep" role="img" viewBox="0 0 160 96"><title id="blueprint-sweep-title">Blueprint sweep</title><defs><clipPath id="blueprint-sweep-clip"><rect id="blueprint-sweep-clip-rect" width="145.5" height="96" x="7.25" y="0"></rect></clipPath></defs><g id="blueprint-sweep-sheet" fill="none" stroke="currentColor" clip-path="url(#blueprint-sweep-clip)"><path id="blueprint-sweep-grid" stroke-width=".75" d="M24 8v80M40 8v80M56 8v80M72 8v80M88 8v80m16-80v80m16-80v80m16-80v80M8 24h144M8 40h144M8 56h144M8 72h144"></path><rect id="blueprint-sweep-frame" width="144" height="80" x="8" y="8" stroke-linecap="square" stroke-width="1.5"></rect><path id="blueprint-sweep-rules" stroke-width="1.5" d="M24 32h96M24 48h64M24 64h80"></path></g><g id="blueprint-sweep-rule"><rect id="blueprint-sweep-wash" width="6" height="88" x="2" y="4" opacity=".18"></rect><path id="blueprint-sweep-edge" fill="none" stroke-width="1.5" d="M8 4v88"></path></g></svg>

animation.css

.pulsar-blueprint-sweep #blueprint-sweep-grid {
  stroke-opacity: var(--pulsar-grid-opacity, 0.25);
}

.pulsar-blueprint-sweep #blueprint-sweep-wash {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-blueprint-sweep #blueprint-sweep-edge {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-blueprint-sweep #blueprint-sweep-clip-rect {
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: blueprint-sweep-reveal;
  animation-duration: 1200ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.pulsar-blueprint-sweep #blueprint-sweep-rule {
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: blueprint-sweep-travel;
  animation-duration: 1200ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes blueprint-sweep-reveal {
  0% {
    transform: scaleX(0);
    animation-timing-function: linear;
  }
  83.333% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes blueprint-sweep-travel {
  0% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: linear;
  }
  83.333% {
    transform: translateX(144px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  100% {
    transform: translateX(156px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-sweep #blueprint-sweep-clip-rect {
    animation: none;
    transform: scaleX(1);
  }

  .pulsar-blueprint-sweep #blueprint-sweep-rule {
    animation: none;
    transform: none;
    opacity: 0;
  }
}