How do you create a 3D tilt effect with mousemove in JavaScript?

A JavaScript 3D tilt effect works by mapping the mouse position within an element to CSS rotateX/rotateY transform values. Step by step: (1) Get the element's bounding box: const r = svg.getBoundingClientRect() — returns the element's position and dimensions relative to the viewport. (2) Calculate mouse offset from center: const x = (e.clientX - r.left - r.width/2) / r.width — dividing by width normalizes to -0.5..0.5 range. Multiply by desired degree range: * 30 gives -15..15 degrees (but this project uses -r.width/2 to r.width/2 divided by r.width, multiplied by 30, giving -15 to 15 degrees). (3) For vertical tilt (rotateX), Y axis mouse movement rotates around the X axis — confusing but mathematically correct. Note the negative: rotateX(${y}deg) with y = ...* -30 — moving the mouse up tilts the top of the element toward you (positive rotateX is the opposite convention). (4) Apply: tilt.style.transform = rotateX(Ydeg) rotateY(Xdeg). (5) Reset on mouseleave: tilt.style.transform = 'rotateX(0) rotateY(0)'. For smooth reset, add CSS transition: transform 0.3s ease to the tilt group.

How does the SVG linearGradient animate element work?

SVG SMIL animations use the element nested inside SVG elements to animate their attributes over time without JavaScript. For the prism gradient: contains two elements — one animates the x1 attribute: , cycling the gradient's start point from left edge to right edge and back. Another animates y2: values='1;0;1' cycling the end point from bottom to top and back. Together they create a flowing diagonal direction change that makes the gradient appear to rotate and shift over 6 seconds. The glassSweep gradient animates its last stop's offset attribute: values='-1;2' moves the highlight from off-screen left to off-screen right on a 2.5s loop, creating the sweeping shine. SMIL animations run entirely in the browser's SVG rendering engine — no JavaScript required. However, they have poor performance on some older Android browsers, and the CSS animation equivalent using @keyframes is often preferred for production.

How do you create a neon glow effect with SVG filters?

SVG filter primitives create glow effects by blurring a copy of the element and merging it back under the original. The filter definition: . Explanation: feGaussianBlur takes the SourceGraphic (the element the filter is applied to) and creates a blurred copy with spread of 6 pixels, saving it as result='b'. feMerge composites two layers: the blurred copy (in='b') first (bottom), then the original SourceGraphic on top. The blurred copy spreading beyond the original edges creates the glow halo. Apply to any SVG element: filter='url(#cyberGlow)'. stdDeviation controls glow spread — higher values = more spread but softer. For a tighter, brighter glow, combine with a higher-saturation stroke color. CSS equivalent: filter: drop-shadow(0 0 8px #00ffff) — simpler but less controllable. The SVG filter approach allows compositing multiple filter primitives (blur, color matrix, flood, composite) in a pipeline for complex effects impossible with CSS alone.

How does the SVG stroke-dasharray animation create a travelling border effect?

The stroke-dasharray animation cycles the dash and gap pattern on a stroke to create a segment that appears to travel around the border. stroke-dasharray: '120 900' means a 120-unit dash followed by a 900-unit gap — a short visible segment on a mostly invisible border. stroke-dasharray: '900 120' means a 900-unit dash with a 120-unit gap — almost fully visible. The element cycles between these: values='120 900;900 120;120 900' dur='10s' — this makes the visible segment grow and shrink, creating the illusion of a glowing arc travelling around the border. For a directional travel effect (like a scanner line), combine stroke-dasharray with stroke-dashoffset animation: animate stroke-dashoffset from the total path length to 0 — this slides a fixed-length dash along the path. The perimeter of the button path is approximately 1020 units (2 × (335-45) + 2 × π × 45 ≈ 862). Setting stroke-dasharray='200 820' and animating stroke-dashoffset from 0 to -1020 creates a clean rotating segment effect.

How do you use the Web Animations API to animate SVG particles?

The Web Animations API allows JavaScript to animate elements using keyframe arrays — a JavaScript equivalent of CSS @keyframes without needing to define CSS classes. Syntax: element.animate([keyframe1, keyframe2, ...], options). In the holographic button: dot.animate([{transform:'translate(0,0)', opacity:1}, {transform:`translate(${x-190}px, ${y-65}px)`, opacity:0}], {duration:700, easing:'ease-out'}). The first keyframe is the start state (at origin, fully visible). The second is the end state (at the calculated explosion position, transparent). options: duration in milliseconds, easing function. The animation runs once (fill-mode defaults to 'none', so the element snaps back after animation). The element is removed by a parallel setTimeout(() => dot.remove(), 700) — the same duration. Advantages over CSS @keyframes for particles: no class definitions needed, each particle has unique end coordinates calculated dynamically (impossible with a single CSS class), animations are garbage-collected with the element. Disadvantages: less performant for very large particle counts vs Canvas. For 14 particles, the DOM/WAAPI approach is cleaner.

Why use createElementNS instead of createElement for SVG elements?

document.createElementNS(namespace, tagName) is required for SVG elements because SVG lives in a different XML namespace than HTML. document.createElement('circle') creates an HTML element named 'circle' — which renders as an unknown inline element with no SVG behavior. document.createElementNS('http://www.w3.org/2000/svg', 'circle') creates a proper SVG circle element in the SVG namespace — which renders as an SVG shape. Rule: createElement for HTML elements (div, span, button), createElementNS with 'http://www.w3.org/2000/svg' for SVG elements (circle, rect, path, text, g, line). Setting attributes on SVG elements also uses setAttribute (not properties like element.r) — except style, className, and event handlers which work normally. To append to an SVG: parentSvgElement.appendChild(newSvgElement). The namespace requirement applies to all SVG element creation in JavaScript: circles, paths, groups, text, lines, and all other SVG primitives.

How do you calculate evenly-distributed radial particle positions with Math.cos and Math.sin?

Evenly distributing points around a circle uses trigonometry: for n particles, the angle for particle i is angle = (Math.PI * 2 / n) * i. Math.PI * 2 is a full circle (2π radians = 360 degrees). Dividing by n splits it into equal sectors. For each angle, the X and Y position at radius r from center (cx, cy): x = cx + Math.cos(angle) * r, y = cy + Math.sin(angle) * r. In the holographic button: center is (190, 65) — the SVG center. For 14 particles: angle = (Math.PI*2/14)*i gives 14 evenly-spaced angles. dist = 80 + Math.random()*60 gives a random radius between 80 and 140 units. x = 190 + Math.cos(angle)*dist, y = 65 + Math.sin(angle)*dist. The particle animates from the center (cx=190, cy=65) to (x, y) — a radial burst. The same formula works for circular progress indicators, clock hands, pie chart segments, radar chart points, starfield generation, and any radially symmetric layout.

How does the SVG element work for reusing shapes?

The SVG element references and renders any defined element by its ID, optionally overriding presentation attributes. Workflow: (1) Define the base shape in — shapes inside are not rendered. defines the button path without rendering it. (2) Reference it multiple times: renders the dark base. renders the prism overlay. renders the sweep. renders the glow border. The same path drawn four times with different visual properties — zero code repetition, perfect alignment guaranteed, single path update changes all layers simultaneously. Attributes on override the original definition's presentation attributes but not structural attributes (d for paths). supports x, y, width, height for positioning and sizing. The wrapper groups all four layers so the JavaScript 3D tilt transform affects all layers simultaneously.

What is getBoundingClientRect and how is it used for mouse interaction?

getBoundingClientRect() returns a DOMRect object with the element's position and dimensions relative to the current viewport: top, left, right, bottom, width, height, x, y. It is essential for converting viewport-relative mouse coordinates (e.clientX, e.clientY) to element-relative coordinates. Pattern: const rect = element.getBoundingClientRect(); const xRelative = e.clientX - rect.left — gives mouse X position within the element (0 at left edge, rect.width at right edge). To normalize to -0.5..0.5 around center: (e.clientX - rect.left - rect.width/2) / rect.width. Multiply by a range: * 30 gives -15..15 degrees for 3D tilt. Important: getBoundingClientRect values change when the page scrolls or the element moves — call it fresh on every mousemove, not once at page load. Performance note: getBoundingClientRect forces a layout calculation (layout thrashing if called many times per frame). For high-frequency mousemove handlers, cache the rect in a variable that only updates on resize: window.addEventListener('resize', () => { cachedRect = element.getBoundingClientRect() }).

What SVG and JavaScript skills does the Next-Gen Holographic Button project teach?

The Next-Gen Holographic Button teaches ten advanced skills spanning SVG, CSS, and JavaScript. SVG skills: (1) SVG and — defining a reusable shape once and referencing it multiple times with different fill/stroke/filter properties. (2) SVG linearGradient with SMIL — animating gradient coordinates for a flowing prism effect without JavaScript. (3) SVG filter pipeline — feGaussianBlur feeding into feMerge with SourceGraphic for a neon glow bloom effect. (4) SVG stroke-dasharray animation — cycling dash/gap patterns to create a travelling neon border segment. (5) SVG on stop offset — scrolling a glass highlight across the button surface. CSS skills: (6) CSS drop-shadow filter with multiple shadows — stacking cyan and magenta drop-shadows for chromatic aberration holographic glow. (7) CSS transform-style: preserve-3d context for the group enabling rotateX/rotateY. JavaScript skills: (8) getBoundingClientRect with normalized mouse-to-rotation mapping for 3D tilt. (9) createElementNS for dynamic SVG element creation (required vs createElement for HTML). (10) Web Animations API — element.animate([keyframes], options) for zero-CSS-class particle animations with unique per-particle end positions calculated via Math.cos/sin radial distribution.

Next-Gen Holographic Button

Frequently Asked Questions — Next-Gen Holographic Button

How does the 3D tilt effect work? getBoundingClientRect() gets the SVG's position. Mouse X offset from center is normalized to -0.5..0.5 by dividing by width, then multiplied by 30 for degrees. Applied as rotateY on mousemove; reset to 0 on mouseleave. The negative multiplier on Y (−30) makes mouse-up tilt the top toward the viewer (correct 3D convention).

How does the prism gradient animate? SVG SMIL elements on the linearGradient's x1 and y2 attributes continuously change the gradient direction angle over 6 seconds — cycling through all diagonal orientations to simulate the shifting iridescence of holographic foil.

Why createElementNS instead of createElement? SVG elements require the SVG XML namespace. document.createElement('circle') creates an unknown HTML element. document.createElementNS('http://www.w3.org/2000/svg', 'circle') creates a real SVG circle. Always use createElementNS with the SVG namespace URL for any dynamically created SVG element.

Is Coodeverse free? Yes — all projects, courses, compilers, and articles are completely free with no paywall, no subscription, and no login required, forever.

HTML + SVG

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Next-Gen Holographic Button</title>
</head>
<body> <svg width="380" height="130" viewBox="0 0 380 130" xmlns="http://www.w3.org/2000/svg" id="holoButton"> <defs> <!-- Glass highlight sweep --> <linearGradient id="glassSweep" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ffffff00"/> <stop offset="50%" stop-color="#ffffff40"/> <stop offset="100%" stop-color="#ffffff00"> <animate attributeName="offset" values="-1;2" dur="2.5s" repeatCount="indefinite"/> </stop> </linearGradient> <!-- Prism rainbow fractal --> <linearGradient id="prism" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#00fff0"/> <stop offset="50%" stop-color="#ff00ff"/> <stop offset="100%" stop-color="#00aaff"/> <animate attributeName="x1" values="0;1;0" dur="6s" repeatCount="indefinite"/> <animate attributeName="y2" values="1;0;1" dur="6s" repeatCount="indefinite"/> </linearGradient> <!-- Glow border --> <filter id="cyberGlow"> <feGaussianBlur stdDeviation="6" result="b"/> <feMerge> <feMergeNode in="b"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <!-- Button shape --> <path id="shape" d="M45,15 H335 A45,45 0 0 1 335,115 H45 A45,45 0 0 1 45,15 Z"/> </defs> <g id="tilt" style="transform-style:preserve-3d;"> <!-- Base --> <use href="#shape" fill="#0e0e21" /> <!-- Prism tint --> <use href="#shape" fill="url(#prism)" opacity=".25" /> <!-- Glass sweep --> <use href="#shape" fill="url(#glassSweep)" opacity=".6" /> <!-- Outer neon border --> <use href="#shape" fill="none" stroke="url(#prism)" stroke-width="6" filter="url(#cyberGlow)"> <animate attributeName="stroke-dasharray" values="120 900;900 120;120 900" dur="10s" repeatCount="indefinite"/> </use> <!-- Text --> <text x="190" y="70" text-anchor="middle" fill="#fff" font-size="32" font-weight="900" letter-spacing="4"> LAUNCH <animate attributeName="opacity" values="0.7;1;0.7" dur="1.8s" repeatCount="indefinite"/> </text> </g> <!-- Particle system --> <g id="pfx"></g> <!-- Click detection zone --> <rect width="380" height="130" fill="transparent" style="cursor:pointer;"/>
</svg> </body>
</html>

/* ── BACKGROUND ───────────────────────────────────────────── */
body{
  margin: 0; height: 100vh;
  /* Deep space: solid dark blue + centered radial vignette */
  background: #050510 radial-gradient(circle at center, #09091d, #050510 70%);
  display: grid; place-items: center; /* Single-line centering */
  overflow: hidden; /* Prevents particle scroll effects */
  font-family: "Arial Black", sans-serif;
}

/* ── HOLOGRAPHIC BUTTON (outer chromatic glow) ───────────── */
#holoButton {
  /* Two stacked drop-shadows: cyan + magenta = chromatic aberration */
  /* This simulates holographic foil separating into spectral components */
  filter:
    drop-shadow(0 0 25px #00eaff80)  /* Cyan halo at 50% opacity */
    drop-shadow(0 0 45px #ff00f860); /* Magenta outer bloom at 37.5% opacity */
  transition: filter .2s ease-out;   /* Smooth between rest and hover states */
}

/* ── HOVER: Intensified Glow ─────────────────────────────── */
#holoButton:hover {
  filter:
    drop-shadow(0 0 40px #00fff9cc)  /* Brighter cyan, larger spread */
    drop-shadow(0 0 80px #ff00ffcc); /* Brighter magenta, larger spread */
}

const svg  = document.getElementById("holoButton");
const tilt = document.getElementById("tilt");

// ── 3D TILT ON MOUSEMOVE ───────────────────────────────────
svg.addEventListener("mousemove", (e) => {
  let r = svg.getBoundingClientRect(); // SVG's viewport position and size

  // Normalize mouse position to degrees:
  // (mouse - left edge - half width) / width → -0.5..0.5 around center
  // × 30 → -15..15 degrees rotateY
  let x = (e.clientX - r.left - r.width/2)  / r.width  * 30;

  // Negative multiplier: mouse up → rotate top toward viewer (correct 3D)
  let y = (e.clientY - r.top  - r.height/2) / r.height * -30;

  tilt.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
});

// ── RESET TILT ON MOUSE LEAVE ─────────────────────────────
svg.addEventListener("mouseleave", () => {
  tilt.style.transform = "rotateX(0) rotateY(0)";
});

// ── PARTICLE BURST ON CLICK ────────────────────────────────
const pfx = document.getElementById("pfx");

function spawnParticle(angle) {
  // createElementNS is REQUIRED for SVG elements (not createElement)
  // SVG lives in a different XML namespace than HTML
  const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  dot.setAttribute("r", 4);

  // Alternate cyan/magenta based on angle index (even/odd)
  dot.setAttribute("fill", angle % 2 ? "#00ffff" : "#ff00ff");

  dot.setAttribute("cx", 190); // Start at SVG horizontal center
  dot.setAttribute("cy", 65);  // Start at SVG vertical center

  // Compute endpoint: radial distribution at random distance 80–140
  const dist = 80 + Math.random() * 60;
  const x = 190 + Math.cos(angle) * dist; // Math.cos gives X component
  const y = 65  + Math.sin(angle) * dist; // Math.sin gives Y component

  // Web Animations API — animate translate + fade, no CSS class needed
  // Each particle has a UNIQUE endpoint — impossible with a single CSS class
  dot.animate(
    [
      { transform: "translate(0,0)",                           opacity: 1 }, // Start
      { transform: `translate(${x-190}px, ${y-65}px)`,        opacity: 0 }  // End
    ],
    { duration: 700, easing: "ease-out" }
  );

  pfx.appendChild(dot);                      // Inject into SVG particle group
  setTimeout(() => dot.remove(), 700);       // Clean up after animation ends
}

// ── SPAWN 14 PARTICLES EVENLY AROUND FULL CIRCLE ─────────
svg.addEventListener("click", () => {
  for (let i = 0; i < 14; i++) {
    // (2π / 14) * i distributes 14 angles evenly around 360°
    spawnParticle((Math.PI * 2 / 14) * i);
  }
});

Frequently Asked Questions — Next-Gen Holographic Button

All Free Projects — Coodeverse

Related Free Courses

Next-Gen Holographic Button

Full Source Code — Next-Gen Holographic Button