Animated flame gradient rises from the box bottom with a jagged flickering top edge (clip-path polygon keyframes). Warm orange/red/yellow palette with continuous flicker — clearly distinct from liquid (blue, smooth, no animation while filled).
Goal: Create a "Fire Fill" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: orange (#f97316) border. When checked, an orange-red gradient fill rises from the bottom (translateY 100%→0%, transition 420ms) with a taller-than-box height (130%) so the jagged top edge is always visible. The top edge flickers continuously using @keyframes that animate clip-path polygon points back and forth creating flame-tip shapes. Warm palette: linear-gradient(0deg, #dc2626, #f97316, #fbbf24). White check mark on top.
Technique: The fill span uses both a CSS transition (for the rise) and a CSS animation (for the flicker) simultaneously. The flicker animation only plays when on=true.
Accessibility: Hidden native <input type="checkbox">. Transitions and animations removed under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.