Pulsar
Blueprint unfold

Blueprint Unfold

CSS

A folded plan sheet opens out in three panels left to right and the drawing inside settles into view.

Tier
CSS
Dependencies
None
Duration
1.6 s, plays once
Categories
Transitions and reveals
Use cases
Documents and files, Transitions and reveals
Industries
Professional services, Legal
Style
Technical · hairline stroke
Set
blueprint
Tags
one-shotwipestaggergeometricfade
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-unfold-title" class="pulsar pulsar-blueprint-unfold" data-pulsar="blueprint-unfold" role="img" viewBox="0 0 160 96"><title id="blueprint-unfold-title">Blueprint unfold</title><g id="blueprint-unfold-sheet" fill="none" stroke="currentColor" stroke-width="1.5"><path id="blueprint-unfold-panel-1" d="M56 8H8v80h48"></path><path id="blueprint-unfold-panel-2" d="M56 8h48M56 88h48"></path><path id="blueprint-unfold-panel-3" d="M104 8h48v80h-48"></path></g><g id="blueprint-unfold-drawing" fill="none" stroke="currentColor"><rect id="blueprint-unfold-plan" width="32" height="16" x="60" y="20" stroke-width=".75"></rect><path id="blueprint-unfold-rules" stroke-width="1.5" d="M100 32h44M16 48h128M16 64h96"></path></g><path id="blueprint-unfold-seams" fill="none" stroke="currentColor" stroke-dasharray="4 4" stroke-width=".75" d="M56 8v80m48-80v80"></path></svg>

animation.css

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

.pulsar-blueprint-unfold #blueprint-unfold-seams {
  stroke-opacity: var(--pulsar-seam-opacity, 0.7);
}

.pulsar-blueprint-unfold #blueprint-unfold-panel-1,
.pulsar-blueprint-unfold #blueprint-unfold-panel-2,
.pulsar-blueprint-unfold #blueprint-unfold-panel-3,
.pulsar-blueprint-unfold #blueprint-unfold-drawing,
.pulsar-blueprint-unfold #blueprint-unfold-seams {
  transform-box: fill-box;
  animation-duration: 1600ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.pulsar-blueprint-unfold #blueprint-unfold-panel-1 {
  transform-origin: left center;
  animation-name: blueprint-unfold-leaf-1;
}

.pulsar-blueprint-unfold #blueprint-unfold-panel-2 {
  transform-origin: left center;
  animation-name: blueprint-unfold-leaf-2;
}

.pulsar-blueprint-unfold #blueprint-unfold-panel-3 {
  transform-origin: left center;
  animation-name: blueprint-unfold-leaf-3;
}

.pulsar-blueprint-unfold #blueprint-unfold-drawing {
  transform-origin: center;
  animation-name: blueprint-unfold-settle;
}

.pulsar-blueprint-unfold #blueprint-unfold-seams {
  transform-origin: center;
  animation-name: blueprint-unfold-crease;
}

@keyframes blueprint-unfold-leaf-1 {
  0% {
    opacity: 0.35;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  33% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes blueprint-unfold-leaf-2 {
  0%,
  25% {
    opacity: 0.35;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  58% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes blueprint-unfold-leaf-3 {
  0%,
  50% {
    opacity: 0.35;
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  83% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes blueprint-unfold-settle {
  0%,
  75% {
    opacity: 0;
    transform: translateY(3px);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blueprint-unfold-crease {
  0%,
  83% {
    opacity: 1;
    animation-timing-function: linear;
  }
  100% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-unfold #blueprint-unfold-panel-1,
  .pulsar-blueprint-unfold #blueprint-unfold-panel-2,
  .pulsar-blueprint-unfold #blueprint-unfold-panel-3 {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
  }

  .pulsar-blueprint-unfold #blueprint-unfold-drawing {
    animation: none;
    opacity: 1;
    transform: translateY(0);
  }

  .pulsar-blueprint-unfold #blueprint-unfold-seams {
    animation: none;
    opacity: 0.4;
  }
}