Snippets

Custom Code Snippets for Enhanced Visuals and Functionality

A collection of ready-to-use code snippets designed to improve both the visual appearance and functionality of your website. From simple styling adjustments to advanced effects like animated preloaders, floating panels, and interactive UI elements.

Each snippet is lightweight, fully customizable, and works without external libraries, giving you more control over design and UX without relying on heavy plugins.

Integration

All snippets are designed to work across modern WordPress setups. You can integrate them in two main ways:

1. For visual styling (backgrounds, buttons, fonts, shadows):
✓ Add the CSS in Additional CSS (Customizer) or via HFCM
✓ Adjust selectors if needed (e.g. .my-button, body, section)

2. For animations and dynamic UI (JS or HTML+CSS):
✓ Add <script> and <style> via HFCM or a plugin like Code Snippets
✓ Insert HTML containers if required (HTML block, widget, or template)
✓ Place JavaScript in the footer or after DOM load
✓ Copy, paste, and tweak

Scripts:

1 – Animated Vein Lines Background
2 – Animated Pulse Grid Overlay
3 – Geometric Rise Animation
4 – Parallax Depth Dots

5 – ASCII Matrix Overlay
6 – Mobile Browser – Top Bar Controls (color)
7 – Mobile UI Color – Bottom Bar Controls (color)
8 – Invisible reCaptcha Badge.

9 – Global Text Shadow

1 – Animated Vein Lines Background

Creates animated SVG vein-like lines that float gently in the background for a subtle.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const svgNS = "http://www.w3.org/2000/svg";
  const svg = document.createElementNS(svgNS, "svg");
  svg.setAttribute("class", "line-veins");
  svg.setAttribute("preserveAspectRatio", "none");
  svg.setAttribute("viewBox", "0 0 1000 2000"); // large canvas height

  // Create 15 smooth flowing paths
  for (let i = 0; i < 15; i++) {
    const path = document.createElementNS(svgNS, "path");
    path.setAttribute("d", generateSmoothPath());
    path.setAttribute("stroke", "#4f97b2");
    path.setAttribute("stroke-width", "0.8");
    path.setAttribute("fill", "none");
    path.setAttribute("opacity", Math.random() * 0.3 + 0.25);
    path.style.animation = `pathFloat ${Math.random() * 10 + 8}s ease-in-out infinite alternate`;
    svg.appendChild(path);
  }

  const wrapper = document.createElement("div");
  wrapper.className = "vein-wrapper";
  wrapper.appendChild(svg);
  container.appendChild(wrapper);

  const style = document.createElement("style");
  style.textContent = `
    .vein-wrapper {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.4;
    }

    .line-veins {
      width: 100%;
      height: 100%;
    }

    @keyframes pathFloat {
      from { transform: translateY(0); }
      to   { transform: translateY(-20px); }
    }

    .entry-content.is-layout-constrained > *:not(.vein-wrapper) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  function generateSmoothPath() {
    const startX = Math.random() * 1000;
    let y = 0;
    let path = `M${startX},${y}`;
    const amplitude = Math.random() * 60 + 40;
    const wavelength = Math.random() * 300 + 150;

    // Use cubic bezier curves for smoothness
    while (y < 2000) {
      const cp1x = startX + (Math.random() - 0.5) * amplitude;
      const cp1y = y + wavelength / 3;
      const cp2x = startX + (Math.random() - 0.5) * amplitude;
      const cp2y = y + 2 * wavelength / 3;
      const endX = startX + (Math.random() - 0.5) * amplitude;
      const endY = y + wavelength;

      path += ` C${cp1x},${cp1y},${cp2x},${cp2y},${endX},${endY}`;
      y = endY;
    }

    return path;
  }
});
</script>

2 – Animated Pulse Grid Overlay

Adds a soft, animated grid of pulsing lines over the content for tech background effect.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const grid = document.createElement("div");
  grid.className = "pulse-grid";
  container.appendChild(grid);

  // Horizontal lines
  for (let i = 0; i < 12; i++) {
    const h = document.createElement("div");
    h.className = "pulse-line horizontal";
    h.style.top = `${i * 8}%`;
    h.style.animationDelay = `${i * 0.3}s`;
    grid.appendChild(h);
  }

  // Vertical lines
  for (let i = 0; i < 12; i++) {
    const v = document.createElement("div");
    v.className = "pulse-line vertical";
    v.style.left = `${i * 8}%`;
    v.style.animationDelay = `${i * 0.3}s`;
    grid.appendChild(v);
  }

  const style = document.createElement("style");
  style.textContent = `
    .pulse-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      animation: fadeGridIn 1.8s ease-in-out forwards;
    }

    .pulse-line {
      position: absolute;
      background: rgba(147, 199, 159, 0.1);
      animation: pulseFlash 4s ease-in-out infinite;
      opacity: 0.1;
    }

    .pulse-line.horizontal {
      width: 100%;
      height: 1px;
    }

    .pulse-line.vertical {
      height: 100%;
      width: 1px;
    }

    @keyframes pulseFlash {
      0%, 100% { opacity: 0.08; }
      50%      { opacity: 0.4; }
    }

    @keyframes fadeGridIn {
      to { opacity: 1; }
    }

    /* Fading top & bottom overlay */
    .pulse-grid::before,
    .pulse-grid::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 60px;
      z-index: 1;
      pointer-events: none;
    }

    .pulse-grid::before {
      top: 0;
      background: linear-gradient(to bottom, #0f304b 0%, transparent 100%);
    }

    .pulse-grid::after {
      bottom: 0;
      background: linear-gradient(to top, #0f304b 0%, transparent 100%);
    }

    .entry-content.is-layout-constrained > *:not(.pulse-grid) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);
});
</script>

3 – Geometric Rise Animation

Generates floating geometric shapes (circles, squares, triangles) that rise upward


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const geoLayer = document.createElement("div");
  geoLayer.className = "geo-layer";

  const shapes = ['circle', 'square', 'triangle'];
  for (let i = 0; i < 30; i++) {
    const shape = document.createElement("div");
    shape.className = `geo-shape ${shapes[i % 3]}`;
    shape.style.setProperty('--x', `${Math.random() * 100}%`);
    shape.style.setProperty('--delay', `${Math.random() * 10}s`);
    shape.style.setProperty('--duration', `${8 + Math.random() * 8}s`);
    shape.style.setProperty('--scale', `${Math.random() * 0.7 + 0.5}`);
    geoLayer.appendChild(shape);
  }

  container.appendChild(geoLayer);

  const style = document.createElement("style");
  style.textContent = `
    .geo-layer {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .geo-shape {
      position: absolute;
      left: var(--x);
      top: 100%;
      opacity: 0;
      transform: scale(var(--scale));
      animation: geoRise var(--duration) linear infinite;
      animation-delay: var(--delay);
    }

    .geo-shape.circle {
      width: 14px;
      height: 14px;
      background: #93C79F;
      border-radius: 50%;
    }

    .geo-shape.square {
      width: 14px;
      height: 14px;
      background: #4F97B2;
    }

    .geo-shape.triangle {
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 14px solid #3B7BA2;
    }

    @keyframes geoRise {
      0% {
        top: 100%;
        opacity: 0;
      }
      10% {
        opacity: 0.3;
      }
      90% {
        opacity: 0.3;
      }
      100% {
        top: -40px;
        opacity: 0;
      }
    }

    .entry-content.is-layout-constrained > *:not(.geo-layer) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);
});
</script>

4 – Parallax Depth Dots

Creates a field of soft, scattered dots with subtle parallax scrolling.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const container = document.querySelector(".entry-content.is-layout-constrained");
  if (!container) return;

  container.style.position = "relative";

  const depthLayer = document.createElement("div");
  depthLayer.className = "depth-dots";
  container.appendChild(depthLayer);

  for (let i = 0; i < 120; i++) {
    const dot = document.createElement("span");
    dot.className = "depth-dot";
    dot.style.left = `${Math.random() * 100}%`;
    dot.style.top = `${Math.random() * 300}%`; 
    dot.style.width = dot.style.height = `${Math.random() * 2 + 1.5}px`;
    dot.style.opacity = `${Math.random() * 0.4 + 0.1}`;
    depthLayer.appendChild(dot);
  }

  const style = document.createElement("style");
  style.textContent = `
    .depth-dots {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      transform: translateZ(0);
      will-change: transform;
      overflow: hidden;
    }

    .depth-dot {
      position: absolute;
      background: #93C79F;
      border-radius: 50%;
      filter: blur(0.5px);
      transition: top 0.2s;
    }

    .entry-content.is-layout-constrained > *:not(.depth-dots) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  // Scroll-linked parallax
  window.addEventListener("scroll", () => {
    const scrollY = window.scrollY || window.pageYOffset;
    depthLayer.style.transform = `translateY(${scrollY * -0.2}px)`;
  });
});
</script>

5 – ASCII Matrix Overlay

Creates animated SVG vein-like lines that float in the background.


<script>
document.addEventListener("DOMContentLoaded", function () {
  const target = document.querySelector(".entry-content.is-layout-constrained");
  if (!target) return;

  document.body.style.position = "relative";

  const asciiLayer = document.createElement("div");
  asciiLayer.className = "ascii-background";
  document.body.appendChild(asciiLayer);

  const fades = [
    { class: 'fade-top',    css: 'top:0;left:0;width:100%;height:60px;background:linear-gradient(to bottom,#0f304b,transparent);' },
    { class: 'fade-bottom', css: 'bottom:0;left:0;width:100%;height:60px;background:linear-gradient(to top,#0f304b,transparent);' },
    { class: 'fade-left',   css: 'top:0;left:0;width:60px;height:100%;background:linear-gradient(to right,#0f304b,transparent);' },
    { class: 'fade-right',  css: 'top:0;right:0;width:60px;height:100%;background:linear-gradient(to left,#0f304b,transparent);' },
  ];

  fades.forEach(({ class: cls, css }) => {
    const div = document.createElement("div");
    div.className = `ascii-fade ${cls}`;
    div.style.cssText = `position:absolute;pointer-events:none;z-index:1;${css}`;
    asciiLayer.appendChild(div);
  });

  const chars = ["#", ".", "+", "-", "=", "*", ":", "~", "^"];
  const rowHeight = 12;
  const colCount = 180;

  function fillAsciiGrid() {
    // запази fade-овете
    const savedFades = Array.from(asciiLayer.querySelectorAll('.ascii-fade'));
    asciiLayer.innerHTML = '';
    savedFades.forEach(f => asciiLayer.appendChild(f));

    const height = target.offsetHeight;
    const rowCount = Math.ceil(height / rowHeight);

    for (let r = 0; r < rowCount; r++) {
      const row = document.createElement("div");
      row.className = "ascii-row";
      for (let c = 0; c < colCount; c++) {
        const char = document.createElement("span");
        char.textContent = chars[Math.floor(Math.random() * chars.length)];
        row.appendChild(char);
      }
      asciiLayer.appendChild(row);
    }

    const rect = target.getBoundingClientRect();
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    asciiLayer.style.top = rect.top + scrollTop + 'px';
    asciiLayer.style.height = rect.height + 'px';
  }

  const style = document.createElement("style");
  style.textContent = `
    .ascii-background {
      position: absolute;
      left: 0;
      right: 0;
      z-index: 0;
      font-family: monospace;
      font-size: 10px;
      line-height: ${rowHeight}px;
      color: rgba(147,199,159,0.035);
      pointer-events: none;
      white-space: pre;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .ascii-row {
      display: flex;
      justify-content: center;
      height: ${rowHeight}px;
    }

    .ascii-row span {
      padding: 0 3px;
    }

    .entry-content.is-layout-constrained > *:not(.ascii-background) {
      position: relative;
      z-index: 1;
    }
  `;
  document.head.appendChild(style);

  fillAsciiGrid();
  window.addEventListener("resize", fillAsciiGrid);
  window.addEventListener("scroll", fillAsciiGrid);
});
</script>

6 – Mobile Browser – Top Bar Controls (color)

Sets the mobile -> browser’s address bar <- to match the site’s color.


<meta name="theme-color" content="#0F304B">

7 – Mobile UI Color – Bottom Bar Controls (color)

Sets the mobile –> system UI <– to match the site’s theme color


:root {
  color-scheme: dark;
  background-color: #0F304B;
}

8 – Invisible reCaptcha Badge

Lowers the opacity of the Google reCaptcha badge


.grecaptcha-badge {
  opacity: 0.1;
  z-index: 1;
}

9 – Global Text Shadow

Applies a soft shadow to all common text elements across the site.


body, h1, h2, h3, h4, h5, h6, p, span, li, a {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}