Sci-Fi Reticule Play Button

This is a Sci-Fi Reticule Play Button. It replaces static interaction states with an immersive, HUD-like sequence. Its function is to trigger a process (like loading data or initializing an app) while providing real-time visual feedback through an animated percentage counter and expanding SVG geometry.

Specs

• Weight: ~80 KB (Dependencies: GSAP Core + DrawSVGPlugin).
• Performance: High. GSAP optimizes SVG stroke animations and clip-path transitions, ensuring smooth 60 FPS rendering without triggering heavy layout recalculations.
• Theming / Customization: CSS variables (--black, --white, --primary) dictate the entire cyberpunk color scheme.
• Responsiveness: Fixed dimensions. The base container is locked to 80x80px and requires manual CSS scaling for different viewports.
• [!] Graceful Degradation: Fails safely but statically. If JavaScript or GSAP is blocked, the button appears but the complex animation sequence and stats panel reveal will not execute.

Anatomy

The structure separates the structural geometry from the animation engine.

• HTML (The Skeleton): A relative .button-container holding absolute, overlapping SVGs for the targeting reticule and play icon, alongside a .stats panel hidden by default.
• CSS (The Skin): Sets the atmospheric tone using filter: drop-shadow() for the neon glow. An animated repeating-linear-gradient creates the continuous motion of the loading bar.
• JS (The Nervous System): GSAP timelines orchestrate the micro-interactions. It manages the hover flickers, the expanding drawSVG border, the clipPath reveal of the stats panel, and the integer counting logic before reversing the entire sequence upon completion.

Logic

The core mechanism relies on “Virtual Object Animation” to drive the DOM counter. This is the Glyph-logic of the snippet:

let count = { val: 0 };
// ...
gsap.to(count, 5, {
  val: 100,
  roundProps: "val",
  onUpdate: () => {
    document.querySelector(".stats-percent").innerHTML = count.val;
  }
});

Instead of using messy setInterval loops or recursive DOM updates, the script utilizes GSAP to animate a virtual JavaScript object (count.val) from 0 to 100. The roundProps parameter forces GSAP to snap to whole integers. The onUpdate hook then pushes these clean integers directly into the HTML on every frame, perfectly syncing the number counter with the duration of the visual timeline.

Feel

Mechanical and precise. The reticule flicker on hover builds anticipation. The click triggers a sharp, satisfying mechanical expansion, transforming a simple button into a tactical heads-up display. It feels like engaging a physical interface in a sci-fi cockpit.