StackBits - React UI & Full-Stack Code Library

Sine Wave

An animated component that arranges items in a sine wave pattern with smooth spring animations. Perfect for creating dynamic, flowing layouts with customizable amplitude and frequency.

Install dependencies

npm i framer-motion

Utility function

Create a file lib/utils.ts and paste this code

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Component

Create a file sine-wave.tsx in your components folder and paste this code

import React from 'react';
import { motion } from 'framer-motion';
import Image from 'next/image';

const SineWave = ({
  items,
  amplitude = 100,
  frequency = 5,
  shouldAnimate = true
}: {
  items: { image: string }[];
  amplitude?: number;
  frequency?: number;
  shouldAnimate?: boolean;
}) => {
  return (
    <div className="w-full h-96 flex items-center justify-center overflow-hidden">
      <div className="flex items-center justify-center gap-4 relative">
        {items.map((item, index) => {
          const yd = Math.sin((index * Math.PI) / frequency) * amplitude;

          return (
            <motion.div
              key={`sine-wave-${index}`}
              className="relative"
              initial={{
                y: shouldAnimate ? 0 : yd
              }}
              animate={{
                y: yd
              }}
              transition={{
                duration: 0.8,
                type: 'spring',
                bounce: 0.5,
                delay: index * 0.05
              }}
            >
              <div className="w-20 h-20 rounded-xl overflow-hidden">
                <Image
                  src={item.image}
                  alt={`Item ${index + 1}`}
                  width={64}
                  height={64}
                  className="w-full h-full object-cover"
                />
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
};

export default SineWave;
        

Usage

<SineWave items={images} />