Shapeblur

Shaders 105

About

minimalistic blur shape fully customizable

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shapeblur to your project and fits it to your theme.

Code

How Shapeblur is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useState, useEffect } from "react";

import { Component } from "@/components/ui/shapeblur"; 

const DemoOne = () => {
  const [pixelRatio, setPixelRatio] = useState(1);
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {

    if (typeof window !== 'undefined') {
      setPixelRatio(window.devicePixelRatio || 1);
    }
  }, []);

  return (

    <div className="flex w-full min-h-screen justify-center items-center bg-black p-4">

      <div 
        className="relative w-[280px] h-[280px] sm:w-[320px] sm:h-[320px] md:w-[350px] md:h-[350px] flex justify-center items-center cursor-pointer"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >

        <div className="absolute inset-0 flex justify-center items-center z-0">
          <h1 
            className={`
              text-4xl sm:text-5xl font-bold select-none 
              transition-colors duration-200 ease-in-out
              ${isHovered ? 'text-gray-100' : 'text-gray-400'} 
            `}
          >
            Hover Me.
          </h1>
        </div>
        <div className="absolute inset-0 z-10 pointer-events-none"> 
          <Component
            variation={0} 
            pixelRatioProp={window.devicePixelRatio || 1}
            shapeSize={1.0}     
            roundness={0.50}    
            borderSize={0.0050}  
            circleEdge={1.0}
            
          />
        </div>
      </div>
    </div>
  );
};

export { DemoOne };