- From: mtechamit via GitHub <noreply@w3.org>
- Date: Fri, 17 Oct 2025 06:35:05 +0000
- To: public-css-archive@w3.org
mtechamit has just created a new issue for https://github.com/w3c/csswg-drafts: == Proposal: Scroll-Reactive Rainbow Background using CSS Houdini Paint Worklet == 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! Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12966 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 17 October 2025 06:35:07 UTC