The Painting · an installation

The Painting · an installation

A child paints. The paint paints back.

The Process

A conversation, in the making

20 messages from Adam · 13 from Claude · April 26, 2026

Let's turn this into an art piece like the other animations

5:35 PM

[uploaded a photo of a child's painting on an easel]

Got it — the holy trinity work. This painting needs to become an animation that captures its energy: the kinetic starbursts, the swirling snail, the dripping verticals, the central radiating chaos. Let me build it.

5:35 PM

Not bad. Can you recreate the nuance better?

5:45 PM

Yeah, I see what's missing. Let me look harder at the actual paint — the way it pools and bleeds, the way the snail's spiral has that wobbly hand-drawn quality, the way the colors sit on each other wet-on-wet.

5:45 PM

That's pretty good but you can do better

5:52 PM

You're right. Let me look harder at what's actually on that page.

5:52 PM

Are you able to just trace the photo

5:57 PM

Honest answer: not perfectly. But I can do something better than what I've been doing — use Python to detect each colored region in the actual photo and pull those pixels directly. The shapes will come from the paint itself, not from my eyes guessing.

5:57 PM

Oh wow!! That's really good. Should we make it a little more meta to include the easel, the clips and the tray???

6:25 PM

YES. The painting isn't just the painting — it's the painting on the easel, with the wooden frame, the blue and yellow clips, the chalkboard panels, the paint tray below. That whole apparatus IS part of the work.

6:25 PM

That's good! Can we make the easel a little less cartoonish and more inline with the painting

6:43 PM

What if the easel were rendered in a restrained, almost technical style — like an architectural drawing, or a Japanese ink rendering — so it recedes and lets the painting be the loud thing? Muted, sketch-like, more line than fill.

6:43 PM

So much better. Now should we include some stuff in the background like the wall or the colorful drum on the lower right corner?

6:51 PM

Yes! Both add such good context. The wall gives it a room (not just a void), and that little colorful bin in the corner is full of personality — clearly more art and chaos peeking in from the kid's world.

7:02 PM

There should be more white canvas under the snail like in the photo

8:32 PM

Let's focus more on the painting with the other things barely in the frame

9:09 PM

I love how the clip looks in the bottom. And how the slightly crooked canvas reveals the easel and chalkboards. Let's make that the edge. Take away the stuff around it

9:26 PM

Beautiful direction. So just the painting on its slightly crooked paper, with the bottom yellow clip and a glimpse of the easel/chalkboard peeking out behind the paper edges. No bin, no tray, no full easel structure. Just the intimate moment of looking at the painting.

9:26 PM

Yes. Now some subtle life to the painting shapes

10:11 PM

I was thinking the streaks of paint could wiggle and undulate and maybe pulsate

10:28 PM

More undulations from the red streaks. Make it like an octopus.. and for the blue streaks have one or two rotate in their own axis. Have some streaks vibrate or undulate at different rates and amplitudes to make the whole thing feel alive

10:40 PM

Octopus tentacles for the red streaks, individual rotations for blue streaks, varied undulations everywhere — this is going to be alive.

10:40 PM

Maybe no rotation of the blue. Now some movement with the yellow parts. Let's try and make those undulations as smooth as possible. They seem kind of jerky

11:00 PM

Got it. The jerkiness comes from the SVG turbulence's discrete seed values jumping — let me only animate baseFrequency and scale smoothly, leave seed alone.

11:00 PM

Awesome!! Maybe stop the snail rotating but give it some vibrations and some breath …. More movement in other spots

11:15 PM

Good — snails don't rotate, they pulse.

11:15 PM

That's cool. Then what if we made it look like someone was rolling out the canvas. Waves that traverse bottom to top

11:30 PM

We lost a lot of movement in the scene. The wave is still way too jittery and NOT smooth

11:50 PM

feTurbulence-based displacement is fundamentally pixelated, no matter how I tune it. Let me try a totally different technique — pure CSS gradient overlay that travels upward.

11:50 PM

Is there any way to improve the rolling of the paper rather than it look like a light wave scrolling over

12:05 AM

Right — light scrolling isn't quite the same as paper unrolling. Let me add a thin shadow band that travels just ahead of the light band — that's the optical signature of unrolling paper, the curve creates a self-shadow as it transitions from rolled to flat.

12:05 AM

That's awesome... let's incorporate the text thread and the code like we did the the restored brain piece... maybe we can change up how we present all three

12:15 AM

composing…

The Source

The full code, in full

626 lines · Python builder + HTML/SVG · auto-scrolling

"""Final alive version: each streak undulates like a tentacle with its own rhythm.
Key technique: each streak gets its own SVG turbulence filter with animated
baseFrequency/seed. The displacement scale also animates. This makes each
streak warp and writhe organically, on its own rhythm.
Plus rotations on a few blue streaks (their own axis), and the previous
shape animations (pink starburst pulse, snail rotation, blue starburst rotation,
flowers blooming).
"""
import base64
def b64(path):
    with open(path, 'rb') as f:
        return base64.b64encode(f.read()).decode('ascii')
# Load images
img_full = b64('/home/claude/painting_FINAL_extended.png')
img_base = b64('/home/claude/painting_base_full.png')
img_blue_burst = b64('/home/claude/shape_blue_starburst.png')
img_snail = b64('/home/claude/shape_snail.png')
img_flower_top = b64('/home/claude/shape_flower_top.png')
img_flower_lower = b64('/home/claude/shape_flower_lower.png')
img_flower_left = b64('/home/claude/shape_flower_left.png')
img_pink = b64('/home/claude/shape_pink_starburst.png')
# New shape images
img_brown_scribble = b64('/home/claude/extra_brown_scribble.png')
img_loaf = b64('/home/claude/extra_loaf.png')
img_purple_drips = b64('/home/claude/extra_purple_drips.png')
img_red_specks = b64('/home/claude/extra_red_specks.png')
# Load streak images
streak_imgs = {
    'pink_leg_left':       b64('/home/claude/streak_pink_leg_left.png'),
    'pink_leg_centerleft': b64('/home/claude/streak_pink_leg_centerleft.png'),
    'pink_leg_center':     b64('/home/claude/streak_pink_leg_center.png'),
    'pink_leg_right':      b64('/home/claude/streak_pink_leg_right.png'),
    'pink_leg_up':         b64('/home/claude/streak_pink_leg_up.png'),
    'pink_arc_topright':   b64('/home/claude/streak_pink_arc_topright.png'),
    'blue_vertical':       b64('/home/claude/streak_blue_vertical.png'),
    'blue_diagonal':       b64('/home/claude/streak_blue_diagonal.png'),
    'yellow_ray_right':    b64('/home/claude/streak_yellow_ray_right.png'),
    'yellow_ray_center':   b64('/home/claude/streak_yellow_ray_center.png'),
    'yellow_ray_left':     b64('/home/claude/streak_yellow_ray_left.png'),
    'brown_drip_left':     b64('/home/claude/streak_brown_drip_left.png'),
    # New additions
    'brown_scribble':      b64('/home/claude/extra_brown_scribble.png'),
    'loaf':                b64('/home/claude/extra_loaf.png'),
    'purple_drips':        b64('/home/claude/extra_purple_drips.png'),
    'red_specks':          b64('/home/claude/extra_red_specks.png'),
}
# Streak position info - (px_x, px_y, px_w, px_h, anchor_rel_x, anchor_rel_y)
streak_info = {
    'pink_leg_left':       (120, 770, 200, 330, 0.85, 0.05),
    'pink_leg_centerleft': (180, 800, 110, 350, 1.0, 0.0),
    'pink_leg_center':     (220, 810, 110, 340, 0.5, 0.0),
    'pink_leg_right':      (280, 800, 130, 300, 0.1, 0.0),
    'pink_leg_up':         (220, 580, 110, 220, 0.5, 1.0),
    'pink_arc_topright':   (320, 130, 220, 570, 0.0, 1.0),
    'blue_vertical':       (630, 380, 90, 360, 0.5, 0.5),
    'blue_diagonal':       (530, 420, 160, 180, 0.0, 1.0),
    'yellow_ray_right':    (610, 380, 70, 620, 0.5, 0.05),
    'yellow_ray_center':   (490, 540, 80, 540, 0.5, 0.0),
    'yellow_ray_left':     (370, 540, 90, 510, 0.5, 0.0),
    'brown_drip_left':     (140, 380, 80, 320, 0.5, 0.0),
    # New additions
    'brown_scribble':      (170, 100, 410, 310, 0.5, 0.5),
    'loaf':                (440, 1180, 290, 250, 0.5, 0.5),
    'purple_drips':        (280, 1100, 180, 200, 0.5, 0.0),
    'red_specks':          (140, 870, 90, 140, 0.5, 0.5),
    # snail_undulate: filter only, no image (applied to snail shape)
    'snail_undulate':      (0, 0, 0, 0, 0.5, 0.5),
}
# Each streak gets its own animation parameters
streak_anim = {
    # Octopus tentacles - the pink streaks - heavy smooth undulation
    'pink_leg_left':       {'freq': 0.018, 'amp': 4.5, 'dur': 7,    'delay': 0.0,  'rotate': None},
    'pink_leg_centerleft': {'freq': 0.022, 'amp': 4.0, 'dur': 6,    'delay': 1.2,  'rotate': None},
    'pink_leg_center':     {'freq': 0.020, 'amp': 5.0, 'dur': 8,    'delay': 0.5,  'rotate': None},
    'pink_leg_right':      {'freq': 0.025, 'amp': 4.5, 'dur': 6.5,  'delay': 2.0,  'rotate': None},
    'pink_leg_up':         {'freq': 0.020, 'amp': 3.5, 'dur': 9,    'delay': 1.5,  'rotate': None},
    'pink_arc_topright':   {'freq': 0.015, 'amp': 5.5, 'dur': 11,   'delay': 0.8,  'rotate': None},
    # Blue streaks - undulate only, NO rotation
    'blue_vertical':       {'freq': 0.022, 'amp': 3.5, 'dur': 9,    'delay': 0.0,  'rotate': None},
    'blue_diagonal':       {'freq': 0.025, 'amp': 3.0, 'dur': 7,    'delay': 1.0,  'rotate': None},
    # Yellow rays - now MORE movement, like flames
    'yellow_ray_right':    {'freq': 0.018, 'amp': 4.0, 'dur': 7.5,  'delay': 0.3,  'rotate': None},
    'yellow_ray_center':   {'freq': 0.020, 'amp': 3.5, 'dur': 8,    'delay': 1.7,  'rotate': None},
    'yellow_ray_left':     {'freq': 0.022, 'amp': 4.2, 'dur': 6.5,  'delay': 0.9,  'rotate': None},
    
    # Brown drip - gentle sway
    'brown_drip_left':     {'freq': 0.025, 'amp': 2.5, 'dur': 10,   'delay': 2.5,  'rotate': None},
    
    # === NEW MOVEMENTS ===
    # Brown scribble at top - sways like grass in wind
    'brown_scribble':      {'freq': 0.020, 'amp': 3.5, 'dur': 9,    'delay': 0.0,  'rotate': None},
    # Loaf - slow breathing creature
    'loaf':                {'freq': 0.012, 'amp': 2.5, 'dur': 12,   'delay': 1.5,  'rotate': None},
    # Purple drips - gentle ripple
    'purple_drips':        {'freq': 0.025, 'amp': 2.0, 'dur': 7,    'delay': 0.5,  'rotate': None},
    # Red specks - tiny vibration
    'red_specks':          {'freq': 0.040, 'amp': 1.5, 'dur': 4,    'delay': 1.0,  'rotate': None},
    # Snail also gets an undulation filter for body vibration
    'snail_undulate':      {'freq': 0.025, 'amp': 1.8, 'dur': 6,    'delay': 0.4,  'rotate': None},
}
# Painting -> SVG conversion
PAPER_X = 25
PAPER_Y = 8
PW = 100
PH = 196
PAPER_BOTTOM = PAPER_Y + PH
CLIP_Y = PAPER_BOTTOM - 4
TOTAL_W = 150
TOTAL_H = PAPER_BOTTOM + 18
CHALK_LEFT_X = 18
CHALK_LEFT_W = 7
CHALK_RIGHT_X = PAPER_X + PW
CHALK_RIGHT_W = 7
POST_LEFT_X = 8
POST_LEFT_W = 10
POST_RIGHT_X = PAPER_X + PW + 7
POST_RIGHT_W = 10
def px_to_svg_x(px):
    return PAPER_X + (px / 800) * PW
def px_to_svg_y(px):
    return PAPER_Y + (px / 1572) * PH
def px_to_svg_w(px):
    return (px / 800) * PW
def px_to_svg_h(px):
    return (px / 1572) * PH
# Shape position info (for the previous animations)
# (px, py, pw, ph, cx, cy) in painting pixel coords
shapes_info = {
    'blue_burst':    {'px': (470, 420), 'pw': 330, 'ph': 330, 'img': img_blue_burst,
                      'cx_pct': 0.79, 'cy_pct': 0.32},
    'snail':         {'px': (80, 1170), 'pw': 300, 'ph': 310, 'img': img_snail,
                      'cx_pct': 0.7, 'cy_pct': 0.45},
    'flower_top':    {'px': (400, 490), 'pw': 80, 'ph': 90, 'img': img_flower_top,
                      'cx_pct': 0.5, 'cy_pct': 0.5},
    'flower_lower':  {'px': (520, 940), 'pw': 80, 'ph': 90, 'img': img_flower_lower,
                      'cx_pct': 0.5, 'cy_pct': 0.5},
    'flower_left':   {'px': (130, 690), 'pw': 70, 'ph': 80, 'img': img_flower_left,
                      'cx_pct': 0.5, 'cy_pct': 0.5},
    'pink_burst':    {'px': (90, 580), 'pw': 420, 'ph': 520, 'img': img_pink,
                      'cx_pct': 0.55, 'cy_pct': 0.4},
}
# Generate per-streak filters
filters_html = ''
for name, params in streak_anim.items():
    freq = params['freq']
    amp = params['amp']
    dur = params['dur']
    delay = params['delay']
    
    # For SMOOTH undulation: only animate baseFrequency and scale,
    # use spline calcMode for buttery interpolation,
    # use a simple oscillation (3 keyframes: low-high-low) so it returns smoothly
    
    freq_low = freq * 0.75
    freq_high = freq * 1.25
    
    scale_low = amp * 0.4
    scale_high = amp
    
    # Spline keyTimes/keySplines for ease-in-out S-curve
    # Two segments: 0->0.5 (low to high), 0.5->1.0 (high to low)
    # keySplines uses cubic bezier P1, P2 for each segment: x1 y1 x2 y2
    # Standard ease-in-out: 0.42, 0, 0.58, 1
    
    filters_html += f'''
    <filter id="undulate_{name}" x="-15%" y="-15%" width="130%" height="130%">
      <feTurbulence type="fractalNoise" baseFrequency="{freq}" numOctaves="2" seed="{hash(name) % 100}">
        <animate attributeName="baseFrequency"
                 values="{freq_low};{freq_high};{freq_low}"
                 keyTimes="0;0.5;1"
                 keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
                 calcMode="spline"
                 dur="{dur}s" begin="{delay}s" repeatCount="indefinite"/>
      </feTurbulence>
      <feDisplacementMap in="SourceGraphic" scale="{amp}">
        <animate attributeName="scale"
                 values="{scale_low};{scale_high};{scale_low}"
                 keyTimes="0;0.5;1"
                 keySplines="0.42 0 0.58 1;0.42 0 0.58 1"
                 calcMode="spline"
                 dur="{dur}s" begin="{delay}s" repeatCount="indefinite"/>
      </feDisplacementMap>
    </filter>'''
# Generate streak SVG image elements
streak_elements_html = ''
for name, (px_x, px_y, px_w, px_h, ax, ay) in streak_info.items():
    if name == 'snail_undulate':
        continue  # this one is just used as a filter on the snail
    sx = px_to_svg_x(px_x)
    sy = px_to_svg_y(px_y)
    sw = px_to_svg_w(px_w)
    sh = px_to_svg_h(px_h)
    cx = sx + sw * ax
    cy = sy + sh * ay
    
    rotate_info = streak_anim[name].get('rotate')
    rotate_class = f'streak-rotate streak-rotate-{name}' if rotate_info else ''
    
    classes = f'shape-layer streak {rotate_class}'.strip()
    
    streak_elements_html += f'''    <g style="transform-origin: {cx:.3f}px {cy:.3f}px; transform-box: view-box;">
      <image class="{classes}"
             x="{sx:.3f}" y="{sy:.3f}" width="{sw:.3f}" height="{sh:.3f}"
             href="data:image/png;base64,{streak_imgs[name]}"
             filter="url(#undulate_{name})"
             preserveAspectRatio="xMidYMid slice"/>
    </g>
'''
# Generate rotation CSS for blue streaks
rotation_css = ''
for name, params in streak_anim.items():
    rot = params.get('rotate')
    if rot:
        cx_px = streak_info[name][0] + streak_info[name][2] * streak_info[name][4]
        cy_px = streak_info[name][1] + streak_info[name][3] * streak_info[name][5]
        cx_svg = px_to_svg_x(cx_px)
        cy_svg = px_to_svg_y(cy_px)
        end_deg = 360 if rot['dir'] > 0 else -360
        rotation_css += f'''
  .streak-rotate-{name} {{
    transform-origin: {cx_svg:.3f}px {cy_svg:.3f}px;
    transform-box: view-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               rotate_{name} {rot['dur']}s linear 7s infinite;
  }}
  @keyframes rotate_{name} {{
    from {{ transform: rotate(0deg); }}
    to   {{ transform: rotate({end_deg}deg); }}
  }}'''
# Generate the previous shape elements (blue burst, snail, flowers, pink burst)
# Snail gets a special undulation filter
prev_shape_html = ''
for name, info in shapes_info.items():
    px_x, px_y = info['px']
    sx = px_to_svg_x(px_x)
    sy = px_to_svg_y(px_y)
    sw = px_to_svg_w(info['pw'])
    sh = px_to_svg_h(info['ph'])
    
    # Snail gets an undulation filter so its body ripples while it breathes
    filter_attr = ''
    if name == 'snail':
        filter_attr = ' filter="url(#undulate_snail_undulate)"'
    
    prev_shape_html += f'''    <image class="shape-layer anim-{name}"
           x="{sx:.3f}" y="{sy:.3f}" width="{sw:.3f}" height="{sh:.3f}"
           href="data:image/png;base64,{info['img']}"
           preserveAspectRatio="xMidYMid slice"{filter_attr}/>
'''
html = f'''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Painting</title>
<style>
  html, body {{
    margin: 0; padding: 0;
    background: #ebe5d8;
    height: 100%;
    overflow: hidden;
  }}
  .stage {{
    position: fixed; inset: 0;
    overflow: hidden;
    display: grid;
    place-items: center;
  }}
  .frame {{
    width: min(85vmin, 700px);
    height: min(98vh, 1000px);
    position: relative;
  }}
  .room-svg {{ width: 100%; height: 100%; display: block; }}
  /* Initial reveal of full painting */
  .painting-static {{
    -webkit-mask: linear-gradient(to bottom, black 0%, black 0%, transparent 0%);
            mask: linear-gradient(to bottom, black 0%, black 0%, transparent 0%);
    animation: revealStatic 5s ease-out 1.0s forwards,
               fadeStatic 1.5s ease-in-out 6s forwards;
  }}
  @keyframes revealStatic {{
    0%   {{ -webkit-mask: linear-gradient(to bottom, black 0%, black 0%, transparent 0%);
            mask:        linear-gradient(to bottom, black 0%, black 0%, transparent 0%); }}
    100% {{ -webkit-mask: linear-gradient(to bottom, black 100%, black 100%, transparent 100%);
            mask:        linear-gradient(to bottom, black 100%, black 100%, transparent 100%); }}
  }}
  @keyframes fadeStatic {{
    to {{ opacity: 0; }}
  }}
  .painting-base, .shape-layer {{
    opacity: 0;
    animation: fadeInShape 1.5s ease-in-out 6s forwards;
  }}
  @keyframes fadeInShape {{
    to {{ opacity: 1; }}
  }}
  /* === SHAPE-SPECIFIC ANIMATIONS === */
  .anim-blue_burst {{
    transform-origin: center;
    transform-box: fill-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               bluePulse 6s ease-in-out 7s infinite;
  }}
  @keyframes bluePulse {{
    0%, 100% {{ transform: scale(1); }}
    50%      {{ transform: scale(1.04); }}
  }}
  .anim-snail {{
    transform-origin: center;
    transform-box: fill-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               snailBreathe 5.5s ease-in-out 7s infinite;
  }}
  @keyframes snailBreathe {{
    0%, 100% {{ transform: scale(1) translate(0, 0); }}
    25%      {{ transform: scale(1.025) translate(0.05px, -0.05px); }}
    50%      {{ transform: scale(1.04) translate(-0.05px, 0.05px); }}
    75%      {{ transform: scale(1.025) translate(0.05px, 0.05px); }}
  }}
  .anim-pink_burst {{
    transform-origin: center;
    transform-box: fill-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               pinkPulse 4.5s ease-in-out 7s infinite;
  }}
  @keyframes pinkPulse {{
    0%, 100% {{ transform: scale(1); }}
    50%      {{ transform: scale(1.05); }}
  }}
  .anim-flower_top {{
    transform-origin: center;
    transform-box: fill-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               flowerBloom 4s ease-in-out 7.2s infinite;
  }}
  .anim-flower_lower {{
    transform-origin: center;
    transform-box: fill-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               flowerBloom 5.3s ease-in-out 7.5s infinite;
  }}
  .anim-flower_left {{
    transform-origin: center;
    transform-box: fill-box;
    animation: fadeInShape 1.5s ease-in-out 6s forwards,
               flowerBloom 3.5s ease-in-out 8s infinite;
  }}
  @keyframes flowerBloom {{
    0%, 100% {{ transform: scale(0.85); }}
    50%      {{ transform: scale(1.18); }}
  }}
  /* Streak rotation animations (blue ones rotate on own axis) */
  {rotation_css}
  /* Paper tilts gently */
  .paper-tilt {{
    transform-origin: center;
    animation: paperTilt 18s ease-in-out infinite;
  }}
  @keyframes paperTilt {{
    0%, 100% {{ transform: rotate(-1.2deg); }}
    50%      {{ transform: rotate(-0.6deg); }}
  }}
  .sketch-line {{
    stroke-dasharray: var(--len, 200);
    stroke-dashoffset: var(--len, 200);
    animation: drawSketch var(--sdur, 1.6s) ease-out var(--sdelay, 0s) forwards;
  }}
  @keyframes drawSketch {{ to {{ stroke-dashoffset: 0; }} }}
  .sketch-fill {{
    opacity: 0;
    animation: fadeInSketch 1.8s ease-out 0.4s forwards;
  }}
  @keyframes fadeInSketch {{ to {{ opacity: 1; }} }}
  .clip-wiggle {{
    transform-origin: center top;
    transform-box: fill-box;
    animation: clipwiggle 7s ease-in-out 6s infinite;
  }}
  @keyframes clipwiggle {{
    0%, 100% {{ transform: rotate(0deg); }}
    50%      {{ transform: rotate(0.5deg); }}
  }}
</style>
</head>
<body>
<div class="stage">
  <div class="frame">
<svg class="room-svg" viewBox="0 0 {TOTAL_W} {TOTAL_H}" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="paperGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fefdf6"/>
      <stop offset="50%" stop-color="#fbfaef"/>
      <stop offset="100%" stop-color="#f5f0e0"/>
    </linearGradient>
    <linearGradient id="woodWash" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#d4c5a8" stop-opacity="0.45"/>
      <stop offset="100%" stop-color="#b8a888" stop-opacity="0.55"/>
    </linearGradient>
    <linearGradient id="chalkWash" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#5a554d" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#3a3530" stop-opacity="0.5"/>
    </linearGradient>
    <filter id="pencilWobble" x="-2%" y="-2%" width="104%" height="104%">
      <feTurbulence type="fractalNoise" baseFrequency="1.5" numOctaves="2" seed="3"/>
      <feDisplacementMap in="SourceGraphic" scale="0.2"/>
    </filter>
    <filter id="paperShadow" x="-15%" y="-15%" width="130%" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1.2"/>
      <feOffset dx="0.5" dy="1.5" result="offsetblur"/>
      <feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <!-- TRAVELING WAVE — soft warm-light band sweeping upward -->
    <!-- Wider band with feathered edges, more stops for smoother gradient -->
    <linearGradient id="waveGradient" x1="0" y1="0" x2="0" y2="1" 
                    gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="rgba(255,248,225,0)">
        <animate attributeName="offset"
                 values="1.3;-0.5"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
      <stop offset="8%" stop-color="rgba(255,248,225,0.18)">
        <animate attributeName="offset"
                 values="1.38;-0.42"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
      <stop offset="16%" stop-color="rgba(255,248,225,0.42)">
        <animate attributeName="offset"
                 values="1.46;-0.34"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
      <stop offset="24%" stop-color="rgba(255,248,225,0.18)">
        <animate attributeName="offset"
                 values="1.54;-0.26"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
      <stop offset="32%" stop-color="rgba(255,248,225,0)">
        <animate attributeName="offset"
                 values="1.62;-0.18"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
    </linearGradient>
    <!-- SHADOW BAND — a subtle dark line ahead of the light, like the curve of unrolling paper -->
    <linearGradient id="shadowGradient" x1="0" y1="0" x2="0" y2="1"
                    gradientUnits="objectBoundingBox">
      <stop offset="0%" stop-color="rgba(60,40,20,0)">
        <animate attributeName="offset"
                 values="1.42;-0.38"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
      <stop offset="6%" stop-color="rgba(60,40,20,0.18)">
        <animate attributeName="offset"
                 values="1.48;-0.32"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
      <stop offset="12%" stop-color="rgba(60,40,20,0)">
        <animate attributeName="offset"
                 values="1.54;-0.26"
                 keyTimes="0;1"
                 calcMode="spline"
                 keySplines="0.4 0 0.6 1"
                 dur="14s" repeatCount="indefinite"/>
      </stop>
    </linearGradient>
    <!-- Per-streak undulation filters -->
{filters_html}
  </defs>
  <!-- Background slivers -->
  <rect class="sketch-fill" x="{POST_LEFT_X}" y="0" width="{POST_LEFT_W}" height="{TOTAL_H}" fill="url(#woodWash)" stroke="none"/>
  <rect class="sketch-fill" x="{POST_RIGHT_X}" y="0" width="{POST_RIGHT_W}" height="{TOTAL_H}" fill="url(#woodWash)" stroke="none"/>
  <rect class="sketch-fill" x="{CHALK_LEFT_X}" y="0" width="{CHALK_LEFT_W}" height="{TOTAL_H}" fill="url(#chalkWash)" stroke="none"/>
  <rect class="sketch-fill" x="{CHALK_RIGHT_X}" y="0" width="{CHALK_RIGHT_W}" height="{TOTAL_H}" fill="url(#chalkWash)" stroke="none"/>
  <g filter="url(#pencilWobble)" stroke="#7a6a55" fill="none" stroke-linecap="round" stroke-width="0.25">
    <line class="sketch-line" style="--len: {TOTAL_H}; --sdur: 1.6s; --sdelay: 0s;"
          x1="{POST_LEFT_X}" y1="0" x2="{POST_LEFT_X}" y2="{TOTAL_H}" opacity="0.5"/>
    <line class="sketch-line" style="--len: {TOTAL_H}; --sdur: 1.6s; --sdelay: 0.05s;"
          x1="{POST_LEFT_X + POST_LEFT_W}" y1="0" x2="{POST_LEFT_X + POST_LEFT_W}" y2="{TOTAL_H}" opacity="0.5"/>
    <line class="sketch-line" style="--len: {TOTAL_H}; --sdur: 1.6s; --sdelay: 0.1s;"
          x1="{POST_RIGHT_X}" y1="0" x2="{POST_RIGHT_X}" y2="{TOTAL_H}" opacity="0.5"/>
    <line class="sketch-line" style="--len: {TOTAL_H}; --sdur: 1.6s; --sdelay: 0.15s;"
          x1="{POST_RIGHT_X + POST_RIGHT_W}" y1="0" x2="{POST_RIGHT_X + POST_RIGHT_W}" y2="{TOTAL_H}" opacity="0.5"/>
  </g>
  <!-- THE PAPER -->
  <g class="paper-tilt" style="transform-origin: {TOTAL_W/2}px {TOTAL_H/2}px;">
    <rect x="{PAPER_X}" y="{PAPER_Y}" width="{PW}" height="{PH}"
          fill="url(#paperGrad)" filter="url(#paperShadow)"/>
    <!-- Static painting (revealed first, then fades) -->
    <image class="painting-static"
           x="{PAPER_X}" y="{PAPER_Y}" width="{PW}" height="{PH}"
           href="data:image/png;base64,{img_full}"
           preserveAspectRatio="xMidYMid slice"/>
    <!-- Base painting (everything except animated parts) -->
    <image class="painting-base"
           x="{PAPER_X}" y="{PAPER_Y}" width="{PW}" height="{PH}"
           href="data:image/png;base64,{img_base}"
           preserveAspectRatio="xMidYMid slice"/>
    <!-- Animated SHAPES (rotation, pulse, bloom) -->
{prev_shape_html}
    <!-- Animated STREAKS (undulation) -->
{streak_elements_html}
    <!-- TRAVELING WAVE — a soft shadow band followed by a highlight band that sweeps upward -->
    <!-- The shadow + light combo simulates the curve of unrolling paper -->
    <rect class="wave-shadow"
          x="{PAPER_X}" y="{PAPER_Y}" width="{PW}" height="{PH}"
          fill="url(#shadowGradient)"
          style="mix-blend-mode: multiply; pointer-events: none;"/>
    <rect class="wave-band"
          x="{PAPER_X}" y="{PAPER_Y}" width="{PW}" height="{PH}"
          fill="url(#waveGradient)"
          style="mix-blend-mode: overlay; pointer-events: none;"/>
    <!-- Subtle paper top curl -->
    <path d="M {PAPER_X + 2} {PAPER_Y + 1} Q {PAPER_X + PW/2} {PAPER_Y + 3} {PAPER_X + PW - 2} {PAPER_Y + 1}"
          fill="none" stroke="rgba(140,120,90,0.18)" stroke-width="0.3"/>
    <!-- BOTTOM YELLOW CLIP -->
    <g filter="url(#pencilWobble)" stroke="#5a4f55" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <g class="clip-wiggle">
        <rect class="sketch-fill"
              x="{PAPER_X + PW/2 - 8}" y="{CLIP_Y}"
              width="16" height="11" rx="1.5"
              fill="rgba(220, 180, 50, 0.75)" stroke="none"/>
        <rect class="sketch-line" style="--len: 60; --sdur: 1.2s; --sdelay: 1.6s;"
              x="{PAPER_X + PW/2 - 8}" y="{CLIP_Y}"
              width="16" height="11" rx="1.5" stroke-width="0.3"/>
        <ellipse class="sketch-fill"
                 cx="{PAPER_X + PW/2}" cy="{CLIP_Y + 12.5}" rx="5" ry="2"
                 fill="rgba(180, 140, 30, 0.7)" stroke="none"/>
        <ellipse class="sketch-line" style="--len: 32; --sdur: 0.8s; --sdelay: 1.8s;"
                 cx="{PAPER_X + PW/2}" cy="{CLIP_Y + 12.5}" rx="5" ry="2" stroke-width="0.3"/>
        <circle class="sketch-line" style="--len: 12; --sdur: 0.5s; --sdelay: 2.0s;"
                cx="{PAPER_X + PW/2}" cy="{CLIP_Y + 6}" r="2" stroke-width="0.3"
                fill="rgba(140, 110, 20, 0.6)"/>
      </g>
    </g>
  </g>
</svg>
  </div>
</div>
</body>
</html>
'''
with open('/home/claude/painting.html', 'w') as f:
    f.write(html)
import os
print(f"Wrote painting.html ({os.path.getsize('/home/claude/painting.html')} bytes)")