Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Pastel pink/mint/lavender palette, pill shapes, bouncy motion, Cherry Bomb One display font, and sparkle particle effects.
| Type | Full (theme + effects + components) |
|---|---|
| Theme CSS | packs/kawaii.theme.css |
| Effects CSS | packs/kawaii.effects.css |
| Effects JS | packs/kawaii.effects.js |
| Full bundle | packs/kawaii.full.css + packs/kawaii.full.js |
Theme
Token overrides scoped to [data-theme~="kawaii"]:
- Pastel pink primary, mint secondary, lavender accent
- Full pill border radii (100px)
- Cherry Bomb One display font
- Bouncy easing curves
- Soft shadow tokens
Effects
Opt-in effects via data-effect attribute:
data-effect="starburst"— animated pastel starburst gradient backgrounddata-effect="sparkle"— CSS-only floating sparkle starsdata-effect="bounce"— spring-loaded bounce animation on hoverdata-effect="wiggle"— playful rotation wobble (continuous ordata-trigger="hover")data-effect="particles"— JS-driven floating emoji particle effect
Loading
Full pack
<link rel="stylesheet" href="/cdn/packs/kawaii.full.css"><script type="module" src="/cdn/packs/kawaii.full.js"></script>Granular loading
<!-- Theme only (CSS tokens, no JS) --><link rel="stylesheet" href="/cdn/packs/kawaii.theme.css"> <!-- Effects only --><link rel="stylesheet" href="/cdn/packs/kawaii.effects.css"><script type="module" src="/cdn/packs/kawaii.effects.js"></script>Runtime activation
import { activateBundle } from '/cdn/vanilla-breeze.js'await activateBundle('kawaii')Demo
View the Kawaii pack demo to see the theme, effects, and components in action.