Blueprint Sheets

CSS

Three drawing sheets rise into an offset stack and the top sheet fills in with rules and a folded corner.

Tier: CSS
Dependencies: None
Duration: 1.4 s, plays once
Categories: Transitions and reveals, Decorative and illustrative
Use cases: Empty states, Documents and files
Industries: Professional services, Legal
Style: Technical · hairline stroke
Set: blueprint
Tags: one-shotstaggerfadegeometricui
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-sheets-title" class="pulsar pulsar-blueprint-sheets" data-pulsar="blueprint-sheets" role="img" viewBox="0 0 160 96"><title id="blueprint-sheets-title">Blueprint sheets</title><g fill="none" stroke="currentColor" stroke-width="1.5"><rect id="blueprint-sheets-back" width="96" height="64" x="44" y="20"></rect><rect id="blueprint-sheets-middle" width="96" height="64" x="38" y="26"></rect><rect id="blueprint-sheets-front" width="96" height="64" x="32" y="32"></rect></g><g id="blueprint-sheets-rules" fill="none" stroke="currentColor" stroke-width=".75"><path id="blueprint-sheets-rule-1" d="M40 52h64"></path><path id="blueprint-sheets-rule-2" d="M40 64h48"></path><path id="blueprint-sheets-rule-3" d="M40 76h56"></path></g><path id="blueprint-sheets-fold" fill="none" stroke="currentColor" stroke-dasharray="24" stroke-width="1.5" d="M116 32v12h12"></path></svg>

animation.css

.pulsar-blueprint-sheets #blueprint-sheets-rules,
.pulsar-blueprint-sheets #blueprint-sheets-fold {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-blueprint-sheets #blueprint-sheets-back,
.pulsar-blueprint-sheets #blueprint-sheets-middle,
.pulsar-blueprint-sheets #blueprint-sheets-front,
.pulsar-blueprint-sheets #blueprint-sheets-rule-1,
.pulsar-blueprint-sheets #blueprint-sheets-rule-2,
.pulsar-blueprint-sheets #blueprint-sheets-rule-3,
.pulsar-blueprint-sheets #blueprint-sheets-fold {
  transform-box: fill-box;
  transform-origin: left center;
  animation-duration: 1400ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.pulsar-blueprint-sheets #blueprint-sheets-back {
  animation-name: blueprint-sheets-rise-back;
}

.pulsar-blueprint-sheets #blueprint-sheets-middle {
  animation-name: blueprint-sheets-rise-middle;
}

.pulsar-blueprint-sheets #blueprint-sheets-front {
  animation-name: blueprint-sheets-rise-front;
}

.pulsar-blueprint-sheets #blueprint-sheets-rule-1 {
  animation-name: blueprint-sheets-rule-1;
}

.pulsar-blueprint-sheets #blueprint-sheets-rule-2 {
  animation-name: blueprint-sheets-rule-2;
}

.pulsar-blueprint-sheets #blueprint-sheets-rule-3 {
  animation-name: blueprint-sheets-rule-3;
}

.pulsar-blueprint-sheets #blueprint-sheets-fold {
  animation-name: blueprint-sheets-fold-draw;
}

@keyframes blueprint-sheets-rise-back {
  0% {
    opacity: 0;
    transform: translateY(24px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  30% {
    opacity: 0.45;
    transform: translateY(0);
  }
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }
}

@keyframes blueprint-sheets-rise-middle {
  0%,
  15% {
    opacity: 0;
    transform: translateY(24px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  48% {
    opacity: 0.7;
    transform: translateY(0);
  }
  100% {
    opacity: 0.7;
    transform: translateY(0);
  }
}

@keyframes blueprint-sheets-rise-front {
  0%,
  30% {
    opacity: 0;
    transform: translateY(24px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  66% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blueprint-sheets-rule-1 {
  0%,
  60% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  69%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes blueprint-sheets-rule-2 {
  0%,
  68% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  77%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes blueprint-sheets-rule-3 {
  0%,
  76% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  }
  85%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes blueprint-sheets-fold-draw {
  0%,
  80% {
    stroke-dashoffset: 24;
    animation-timing-function: linear;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-sheets #blueprint-sheets-back {
    animation: none;
    opacity: 0.45;
    transform: translateY(0);
  }

  .pulsar-blueprint-sheets #blueprint-sheets-middle {
    animation: none;
    opacity: 0.7;
    transform: translateY(0);
  }

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

  .pulsar-blueprint-sheets #blueprint-sheets-rule-1,
  .pulsar-blueprint-sheets #blueprint-sheets-rule-2,
  .pulsar-blueprint-sheets #blueprint-sheets-rule-3 {
    animation: none;
    transform: scaleX(1);
  }

  .pulsar-blueprint-sheets #blueprint-sheets-fold {
    animation: none;
    stroke-dashoffset: 0;
  }
}