Spring Icon Loader

A minimal image-icon loader with GSAP physics, landing-only icon swaps, Motion fades, squash-and-stretch, and responsive ground shadow.

Customize

Icon 1 URL

Icon 2 URL

Icon 3 URL

Size56px

Bounce68px

Gravity1550

Icon swap

Squash0.12

Stretch0.10

Tilt7deg

Ground hold0.09s

Shadow color

Shadow opacity0.46

Usage

import { useState } from "react";
import { SpringIconLoader } from "@/components/lazy-ui/spring-icon-loader";

const icons = [
  "/images/loading/1.png",
  "/images/loading/2.png",
  "/images/loading/3.png",
];

export function Demo() {
  const [loading, setLoading] = useState(true);

  return (
    <SpringIconLoader
      icons={icons}
      loading={loading}
      size={56}
      bounceHeight={68}
      gravity={1550}
      squash={0.12}
      stretch={0.1}
      tilt={7}
      shadowColor="#94a3b8"
      shadowOpacity={0.46}
      onIconChange={({ index }) => console.log("Icon landed", index)}
      onComplete={() => console.log("Loading complete")}
    />
  );
}