Repository navigation
feat(services): the trunk blazes and its balls take in the blaze like liquid - #15
Merged
Merged
Conversation
A white-hot head with a fading glow trail rides the scroll-scrubbed trunk tip on the same timeline and range, flaring up after each release and burning out into the next. Only with scroll timelines and motion allowed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Each commit dot and release node is born as a white-hot blob, morphing through uneven border radii and cooling from sparkle to accent into its circle, with an ember glow that outlasts the pop like the trail behind the tip. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
The trail was painted over release nodes and commit dots, and the fading-in node let the trunk show through. Badges now stack above the trunk and turn opaque early. Gentler blob radii and overshoot, a shorter white-hot phase and a single, softer, shorter ember glow; the trail drops its doubled glow. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
Half-strength glows on the trail and embers, a dimmer trail head, a shorter white-hot phase and smaller overshoots. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
Where the trail's head strikes, commits and releases form as a drop pulled up towards it, splat as it lands and wobble like jelly (damped stretch and squash) into their circle, replacing the random blob radii. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
…ands When the node is struck, its title fills with the accent from left to right: a soft-edged gradient clipped to the text, scrubbed on the release's scroll timeline, so scrolling back drains it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
Unrevealed titles wait slightly faded; the kindle sweep gets a sparkle seam at its edge and a band of fine twinkling dust (three sparse speck grids of co-prime sizes, masked to ride the edge on the same scroll timeline, twinkling on the clock). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
A passive window scroll listener flags the band while scrolling (150ms idle timeout); the dust fades in quickly while it moves and faints over 0.6s once it rests, via filter so it composes with the sweep's opacity. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
Each speck gets a 2px half-strength sparkle drop-shadow, in the same filter list as the idle fade so the two interpolate together. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
The title sweep now shares the node's merge range end, so each title is completely in ember by the time its release settles, instead of trailing on for another pop of scroll. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
An IntersectionObserver with the scan line as its root edge marks a release kindled once its node's centre crosses it; the title then plays its glitter reveal on the clock (0.9s) and is put out again when scrolled back above the line. The idle-scroll gate on the glitter goes: the dust now only exists during the timed reveal. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW
This branch was successfully deployed
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
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.
The scroll-scrubbed git-log trunk now burns like a fuse, and the commits and releases it strikes take the blaze in like liquid.
Blazing tip
li::afterstreak (2px ×--space-major): gradient transparent → accent → a sparkle-tinted head, half-strength accent glow--releasetimeline andentry-crossingrange as the trunk, so the head rides exactly on the tip; flares up after each release and burns out into the next--trunk-topso trunk and blaze share itLiquid hit on commits and releases
commit/mergekeyframes: each ball forms as a white-hot teardrop pulled up towards the trail's head, stretches as it takes it in, splats on impact, then wobbles like jelly (damped non-uniformscale+ drop-shapedborder-radius) into its circle, cooling from--color-sparkleto the accentemberglow (half-strength accent drop-shadow) runs alongside on a longer range so it outlasts the wobble; the release's Halo flash is keptz-index) and turn opaque early, so the line never shines through themAll of it only inside
prefers-reduced-motion: no-preference+@supports (animation-timeline: view()); otherwise the log rests drawn.Verified: check, lint, unit tests; e2e
motion,responsive,a11y; Chromium screenshots and computedscaleacross scroll positions (damped 0.89×1.13 → 1.07×0.93 → 0.96×1.05 → 1).🤖 Generated with Claude Code
https://claude.ai/code/session_01Y8bgwtK8JrdWVHhi7dm9yW