Add ScrollExpandMedia component for interactive media expansion - #2
Open
matheoceleste-sudo wants to merge 6 commits into
Open
Add ScrollExpandMedia component for interactive media expansion#2matheoceleste-sudo wants to merge 6 commits into
matheoceleste-sudo wants to merge 6 commits into
Conversation
Adapt the scroll-to-expand media hero component to the Astro + React 19 stack: replace next/image with native img and framer-motion animations with CSS transitions, so it works without adding new dependencies. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| 🔵 In progress View logs |
mathclean | 96b6e00 | Jul 07 2026, 02:29 PM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| 🔵 In progress View logs |
cloudflare-docs | 96b6e00 | Jul 07 2026, 02:08 PM |
Port the DottedSurface UI component to the Astro/React stack without three.js: render the animated dot field on a 2D canvas that follows the container's currentColor and honours prefers-reduced-motion. Also add a lightweight cn class-name helper (no clsx/tailwind-merge) and a demo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie
Reconstruct the animated-shader-hero Hero from its demo's prop interface: a full-screen hero whose flowing gradient background is a raw GLSL fragment shader on a full-screen quad (no three.js), with a CSS-gradient fallback when WebGL is unavailable and a single static frame under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie
Build a standalone dark-themed marketing homepage at /e-nettoyage that reuses the previously added components: the animated-shader-hero WebGL Hero as the 3D hero (wrapped for French CTA scroll handlers) and the DottedSurface dot field as an animated mid-page band, plus services, stats, steps, contact and footer sections. Does not touch the existing docs homepage. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie
text-black was not resolving on the rendered page, leaving the primary CTA label white-on-white; use text-slate-950 which resolves correctly (verified in the running dev server). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie
The allowBuilds entries contained the literal placeholder text 'set this to true or false', which pnpm 11 treats as not-approved and fails install with ERR_PNPM_IGNORED_BUILDS. Set the four packages to true, matching the intent of the existing onlyBuiltDependencies allowlist (esbuild, sharp, tldjs, workerd). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a new
ScrollExpandMediacomponent that provides an interactive scroll-to-expand interface for media content (videos and images). The component features smooth animations, responsive design, and support for both desktop (wheel) and mobile (touch) interactions.Key Features
Technical Details
Documentation Checklist
https://claude.ai/code/session_01PZy2r6BEbiEVB7jxPrtCie