Proposal: Scroll-Reactive Rainbow Background using CSS Houdini Paint Worklet

[mtechamit]

Proposal: Scroll-Reactive Rainbow Background using CSS Houdini Paint Worklet

A creative experiment showcasing a "scroll-reactive rainbow background" built entirely using the "CSS Houdini Paint Worklet API".

As the user scrolls, the hue value rotates smoothly from 0° to 360°, creating a dynamic neon-like rainbow background — without using any heavy JavaScript animations.

Demo
Live Demo:https://mtechamit.github.io/rainbow-houdini/

Worklet Source:
https://github.com/mtechamit/rainbow-houdini
https://mtechamit.github.io/rainbow-houdini/rainbow-scroll.js

---

Key Features

• Scroll-based color animation: Hue changes relative to scroll position.
• Smooth easing: Transitions are fluid and GPU-friendly.
• Pure Houdini rendering: All drawing logic handled in the Paint Worklet.
• Minimal JS: Only one CSS custom property (--scroll-pos) is updated.
• Works in Chrome/Edge using PaintWorklet API.

Why This Matters
This project highlights the potential of CSS Houdini Paint API for interactive and reactive visual effects.
It suggests a possible future direction for native scroll-linked color or gradient animations directly in CSS — without external JS or worklets.

Possible Extensions
-Allow hue rotation or animation timelines to be defined directly in CSS (e.g., via animation-timeline: scroll() or a new scroll-hue() function).

• Extend Paint API to have built-in hooks for scroll progress.
• Could serve as an official educational example for Houdini Paint API in CSS specifications.

Suggested Tags
CSS, Houdini, PaintWorklet, Proposal, Scroll-linked Animation

Thank you for reviewing this experimental proposal — feedback and discussion are very welcome!