← Components/Animations & Cursors

MorphingBlob

morphingblob-1779378412885.tsx

'use client'
import { useEffect, useRef } from 'react'

export default function MorphingBlob() {
  return (
    <div style={{ background: '#0A0A0A', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 60, gap: 40, flexWrap: 'wrap' }}>
      <style>{`
        @keyframes morph1 {
          0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
          25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
          50% { border-radius: 50% 60% 20% 60% / 30% 60% 70% 40%; }
          75% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
        }
        @keyframes morph2 {
          0%,100% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
          33% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
          66% { border-radius: 70% 30% 50% 50% / 30% 70% 70% 30%; }
        }
        @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes colorShift {
          0% { background: linear-gradient(135deg, #C9A84C, #6366f1); }
          33% { background: linear-gradient(135deg, #6366f1, #22c55e); }
          66% { background: linear-gradient(135deg, #22c55e, #ef4444); }
          100% { background: linear-gradient(135deg, #ef4444, #C9A84C); }
        }
      `}</style>

      {[
        { anim: 'morph1 8s ease-in-out infinite, float 6s ease-in-out infinite', size: 140, bg: 'linear-gradient(135deg, #C9A84C, #f59e0b)', label: 'Morphing' },
        { anim: 'morph2 10s ease-in-out infinite, float 8s ease-in-out infinite 1s', size: 100, bg: 'linear-gradient(135deg, #6366f1, #8b5cf6)', label: 'Floating' },
        { anim: 'morph1 6s ease-in-out infinite 2s, float 4s ease-in-out infinite 0.5s', size: 120, bg: 'linear-gradient(135deg, #22c55e, #06b6d4)', label: 'Animated' },
      ].map((b, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div style={{
            width: b.size, height: b.size,
            background: b.bg,
            animation: b.anim,
            boxShadow: `0 0 40px ${i === 0 ? 'rgba(201,168,76,0.3)' : i === 1 ? 'rgba(99,102,241,0.3)' : 'rgba(34,197,94,0.3)'}`,
          }} />
          <span style={{ color: '#555', fontSize: 12, letterSpacing: '0.05em' }}>{b.label}</span>
        </div>
      ))}
    </div>
  )
}

Component info

CategoryAnimations & Cursors

Frameworkreact

TierFREE

Copies0

About

CSS animated morphing blob with color shift and scale animation

More from Animations & Cursors

'use client'
import { useState, useEffect, useRef } from 'react'

interface AnimatedNumberProps {
  target: number
  duration?: number
  prefix?: string
  suffix?: string
  decimals?: number
  onComplete?: () => void
}

function AnimatedNumber({ targ

CounterAnimation

Animations & Cursors

import React from 'react';
import { motion } from 'framer-motion';

interface MorphCursorProps {
  children: React.ReactNode;
}

const MorphCursor: React.FC<MorphCursorProps> = ({ children }) => {
  const [cursorType, setCursorType] = React.useState(

MorphCursor

Animations & Cursors

import { useEffect, useState } from 'react';

interface Dot {
  x: number;
  y: number;
  opacity: number;
}

const TrailCursor = () => {
  const [dots, setDots] = useState<Dot[]>([]);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0

TrailCursor

Animations & Cursors

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

interface PixelCursorProps {
  color: string;
}

const PixelCursor: React.FC<PixelCursorProps> = ({ color }) => {
  const [mousePosition, setMousePosition] = useSta

PixelCursor

Animations & Cursors