Potion cauldron
Drop in two ingredients and brew. Each combo casts a different CSS effect across the entire page.
How it works#
You pick up to 4 ingredients from the 16 available (cosmic, element, flora, fauna) and hit brew. If the combo matches one of the 22 recipes, a potion fires; otherwise it fizzles and ticks the stats.
Each potion adds a .potion-* class to <html> that triggers a filter or @keyframes in globals.css over the full page. Rare and legendary recipes also spawn a DOM overlay with particles (rain, lightning, frost, aurora, matrix…). Duration scales with rarity: common 4.6s, rare 5.8s, legendary 7.2s.
Discovery, per-recipe counts, pins and achievements persist in localStorage. Three tabs: ingredients, grimoire (recipes with reverse-load) and stats with progress bar.
Shortcuts: B brew, R random, C clear.
Respects prefers-reduced-motion: screen effects are disabled.
Where it comes from#
