Casefinite-style · Recreated

A logo that folds into itself.

One CSS custom property --fold drives every visual stage of the morph — slot width, stroke draw-on, per-letter stagger, and the round pill background. Scroll the page to watch the wordmark collapse into the infinity mark.

Fold = 0 (expanded)
Fold = 0.25
Fold = 0.5
Fold = 0.75
Fold = 1 (collapsed)

How the animation works

  1. One registered property. @property --fold with syntax: "<number>" lets the browser interpolate it like a real number — that gives us smooth, frame-perfect motion across all sub-elements from a single source of truth.
  2. One trigger. An IntersectionObserver on the hero flips data-collapsed on the brand wrapper when the page scrolls past a threshold. .brand-morph[data-collapsed] { --fold: 1; }
  3. Many readers. Every visual element expresses its target state as calc(... * var(--fold)) or clamp(0, ... * var(--fold), 1). Slot width, stroke dashoffset, letter translates, opacities, even the pill background scale — all computed from the same number.
  4. Stagger via per-element variable. Each letter has its own --mid (.3, .275, .25, .225, ...) so the wordmark cascades out — letters don't all leave at once.
  5. Reduced motion respected. The morph is suppressed when prefers-reduced-motion: reduce is set.

Core snippet

@property --fold {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.brand-morph {
  --fold: 0;
  transition: --fold 0.62s cubic-bezier(0.45, 0, 0.55, 1);
}
.brand-morph[data-collapsed] { --fold: 1; }

.bm-fig {
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.9366;
  stroke-dasharray: 100;
  stroke-dashoffset: max(0, 100 - 200 * var(--fold));
  opacity: min(2 * var(--fold), 2 - 2 * var(--fold));
}

The demo page renders five frozen frames of the morph (each pinned to a specific --fold value) so you can see the intermediate states without scrolling. The full SVG and CSS are vendored from the Casefinite header — view source to inspect.