Three rules govern every animation in the GFS system. If a motion does not satisfy all three, it does not ship.

Six easing curves cover every motion need. Each card shows the bezier curve, a live animation demo (hover to play), and the CSS value. Use exactly these tokens -- never define custom curves.

Five duration tiers handle every timing need. Hover each bar to see the duration in action. The bar fills at the specified speed.

Eight entrance patterns for bringing elements into view. Click "Play" to trigger each animation. All use ease-out-expo timing.

Six exit patterns for removing elements from view. All use ease-in timing to accelerate away from the user's focus.

Three page-level transition patterns shown as storyboard frames. Each frame represents a stage in the transition sequence.

Four scroll-triggered animation patterns. These activate as elements enter the viewport. Click "Trigger" to simulate the scroll event.

Every common interaction fully specified: trigger, property, duration, easing, and delay. These are non-negotiable -- every implementation must match these specs exactly.

function getParticleCount() {
  const w = window.innerWidth;
  if (w > 1024) return { count: 100, linkDist: 150, speed: 1.0 };
  if (w > 768)  return { count: 60,  linkDist: 120, speed: 0.8 };
  return              { count: 30,  linkDist: 100, speed: 0.6 };
}

const cfg = getParticleCount();

tsParticles.load("my-container", {
  particles: {
    number:  { value: cfg.count },
    color:   { value: "#092F64" },
    links:   { enable: true, distance: cfg.linkDist, color: "#93BFEF", opacity: 0.4 },
    move:    { enable: true, speed: cfg.speed },
    size:    { value: { min: 2, max: 4 } },
    opacity: { value: 0.5 }
  },
  interactivity: {
    events: {
      onHover: { enable: w > 768, mode: "repulse" }
    },
    modes: {
      repulse: { distance: 100, duration: 0.4 }
    }
  },
  detectRetina: true
});

Each demo below generates SVGs programmatically using the SVG.js library. These are live, editable, and use the GFS brand color palette throughout.

Each animation below uses Anime.js for timeline-based motion design. All demos include play, pause, and restart controls. The animations use the GFS brand colors and follow our motion design principles.

These demos combine multiple libraries to create rich, interactive effects. Rough.js provides the hand-drawn aesthetic, SVG.js handles vector generation, and Anime.js drives the animations.

Algorithmically created artwork that is unique every time. Using GFS's color palette and visual DNA — dots, lines, grids — these sketches generate one-of-a-kind branded visuals for backgrounds, social media, posters, and presentations.

Inspired by contribution graphs, this 52x7 grid maps one full year of GFS shipment volume. Each cell represents a single day. Color intensity corresponds to shipment count: lightest for quiet days, deepest cobalt for peak volume. Weekends naturally show less activity. Holiday weeks create visible valleys. Peak seasons — spring produce, fall procurement — glow dark.

A DNA-barcode-style visualization of daily cold chain compliance across one calendar year. Each vertical bar is one day. Green means 100% compliance. Rare yellows mark days where minor deviations occurred. A red bar means a breach event. The overwhelmingly green result tells the GFS story: relentless compliance.

A simplified US geography where dot density represents GFS shipment volume per region. Northeast is densest — that is home territory. Central regions show moderate activity. The West Coast has lighter, strategic coverage. Pure CSS using repeating background patterns at varied densities.

Each row represents one week. Each column represents a product category. Cell color corresponds to the category. The result is a textile-like tapestry that reveals patterns in GFS's product mix over time: seasonal shifts, product launches, and procurement cycles become visible as color bands.

An animated continuous pattern representing GFS operations in real time. Morning hours (6-10 AM) spike as shipments depart. Midday levels sustain. Afternoon shows a secondary peak for receiving. Night drops to baseline monitoring. The pattern loops every 8 seconds, creating a living, breathing rhythm.

Every GFS document gets a unique visual fingerprint generated from its ID number. The fingerprint is a 20x4 grid where cell on/off patterns are derived deterministically from the document number. Like a visual hash. Each fingerprint is unique but all share the GFS blue palette — making them instantly identifiable as GFS documents.

<script src="https://cdn.jsdelivr.net/npm/@dotlottie/player-component@2/dist/dotlottie-player.mjs"
        type="module"></script>

<dotlottie-player
  src="animation.lottie"
  background="transparent"
  speed="1"
  style="width: 200px; height: 200px;"
  loop
  autoplay
></dotlottie-player>

style="width:24px;height:24px;"

style="width:120px;height:120px;"

style="width:400px;height:400px;"

/* CSS: respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  dotlottie-player {
    display: none;
  }
  .lottie-fallback {
    display: block; /* show static SVG instead */
  }
}

/* JS: check before initializing */
const motionOK = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (motionOK) {
  document.querySelectorAll("dotlottie-player").forEach(p => p.play());
}