Crafted, cinematic, never in the way.

Five durations and three signature curves. Pick the shortest duration that still reads; images get “reveal”, stamps get “ink”, state changes get “cut”.

Every effect PROOF allows, live. They trigger once on first view and can be replayed here. None of them hijack scrolling.

A small labeled tag rides next to the native cursor on fine pointers only. It never replaces the cursor, and touch devices never see it. Hover the zones.

Each preset overrides --dur and --ease. Forms, checkout and the proofing portal ignore the personality and stay calm in every preset.

Cross-document View Transitions are live in this kit: open D02 and choose Hofmark Dairy; the frame and the D03 hero share view-transition-name “hofmark”. Transform and opacity only. Anything that moves longer than 5 seconds gets a pause control (WCAG 2.2.2). Browsers without support get a plain cut, which is also the reduced-motion behavior.

@view-transition { navigation: auto; }
.frame-07A, .case-hero { view-transition-name: bruehl; }
::view-transition-group(bruehl) {
  animation-duration: 700ms;
  animation-timing-function: var(--ease-reveal);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
}