SD Logo Dot Animation

Task: Implement a coordinated “Bloom” micro-animation for the gold dot in the BrandLogo component.

Context: I am following a “Cash to Gold” brand metaphor. When the ‘S’ (Cash) transforms into ’$’ (Wealth), the gold dot (Goal) should “Bloom” to confirm the transformation.

Reference Files:

• sites/Template/src/components/brand/BrandLogo.astro
• src/brand/sd/logos/svg-paths-base/sd-leaf-dot.svg

Instructions:

1. Open BrandLogo.astro.
2. Locate the existing CSS animation logic for #char-dollar (the 4s cycle).
3. Create a new CSS keyframe animation named dot-bloom within the <style> block:
   • 0% to 45%: brightness(1) [Base state while ‘S’ is visible]
   • 50%: brightness(1.4) drop-shadow(0 0 2px rgba(212, 175, 55, 0.6)) [Peak Bloom when ’$’ becomes solid]
   • 60% to 85%: brightness(1.1) [Subtle ‘energized’ state while ’$’ remains]
   • 90% to 100%: brightness(1) [Return to base as ’$’ fades back to ‘S’]
4. Apply this animation to the #path-dot element (or #dot) inside the SVG.
5. Ensure the animation only triggers when the parent has the .brand-logo--animate class.
6. Ensure the animation duration is exactly 4s to match the character morph.
7. Verify that the animation respects prefers-reduced-motion by wrapping it in the existing media query.

Goal: The dot should appear to “acknowledge” the wealth transformation with a soft, sophisticated pulse of light.

---

SD Logo Animation Notes - Current System

• See D:\FSS\Websites\monorepo\sites\sdc.com\docs\design\SD-logo-animation.md

Additional Notes/Context (from aistudio.google.com) …

By timing the Gold Dot “Bloom” to the peak of the S-to-$ transformation, you create a “Functional Confirmation” of the cash-to-gold metaphor.

Because your existing system uses CSS Keyframes within an Astro component (BrandLogo.astro), the most robust way to implement this is to add a second set of keyframes to that same 4-second cycle.

Part 1: Technical Specifications for the “Bloom”

To ensure the animation feels “premium” and not “distracting,” these are the exact values Claude Code should use:

• Trigger Point: The “Bloom” should start at 1.8s (just as the S finishes fading out) and peak at 2.0s (when the $ is fully solid).

• Visual Method: We will use filter: brightness() and/or a subtle drop-shadow. This keeps the SVG path data clean and avoids scaling issues.

• The “Linger” Effect: The dot should stay slightly “energized” while the $ is visible, then fade back as the $ transitions back to S.

Part 2: Implementation Plan for Claude Code

Claude Code will need to perform three specific tasks:

1. SVG Path Alignment: Ensure the id=“path-dot” is correctly identified in the sd-leaf-dot.svg source.

2. CSS Keyframe Integration: Add the @keyframes dot-bloom to BrandLogo.astro.

3. Class Assignment: Apply the animation to the dot element only when the .brand-logo—animate class is present.

Why this plan is robust for all devices:

1. Hardware Acceleration: By using CSS filter: brightness, the browser can offload the animation to the GPU, ensuring it doesn’t lag on mobile devices.

2. Zero JavaScript Dependency: Since the logo sits in the header, keeping the animation in pure CSS prevents “layout shift” and ensures it starts immediately upon page load.

3. Path-Based Stability: Because we are animating the filter of the path, not the geometry, the coordinates we worked so hard to “bake in” stay perfectly static, preventing any “jitter” in Safari or older Chrome versions.

4. Coordinated Pulse: By using percentages (45%, 50%, 60%) that align with your existing show-dollar timeline, the two elements will appear “aware” of each other, which is the hallmark of high-end UI design.