murasaki.quest

murasaki .quest

"every gradient blooms from shadow"

scroll

CSS BOTANICAL

.wisteria

.leaf-cross-section {
  background: linear-gradient(
    135deg,
    #1A0033 0%,
    #6A0DAD 100%
  );
  filter: blur(var(--blur-amount))
         saturate(var(--saturation));
  transition: filter 800ms
              cubic-bezier(0.25,0.46,0.45,0.94);
}

.murasaki-heading {
  font-variation-settings:
    "wdth" var(--font-width),
    "wght" var(--font-weight);
  color: #E8D5F5;
}

:root {
  --murasaki: #6A0DAD;
  --shadow:   #0D0021;
  --bloom:    #F0E6FF;
}

filter: blur()

METHOD.01

WISTERIA FLORIBUNDA

DEEP DIVE

Explore

LEVEL 01

Variable Fonts

Axis-driven typography that breathes. Width and weight transitions as kinetic sculpture on the web.

LEVEL 02

CSS Filters

Blur, saturate, hue-rotate. The photographic darkroom brought to the browser's rendering pipeline.

LEVEL 03

SVG Animation

Stroke-dashoffset paths that draw themselves. Scientific illustration at 60fps across every viewport.

INDEX

murasaki.quest

A taxonomy of purple-tinted techniques

Variable Fonts

CSS Custom Props

SVG Paths

Filter Effects

Intersection API

Grid Architecture

Blur Focus

Animation Easing

Z-Pattern Layout

Duotone Gradients

RAF Animation

Monochrome Depth