Gooey Filter

Renders a filtered wrapper with a gooey effect using SVG filters. Applies blur and contrast to the children. Use when adding a smooth, stylized visual effect to elements.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/gooey-filter

npx layro-cli add @educlopez/gooey-filter

npx layro-cli add @educlopez/gooey-filter

bunx layro-cli add @educlopez/gooey-filter

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { type ElementType, type ReactNode, useId } from "react";

const DEFAULT_STRENGTH = 8;
const DEFAULT_CONTRAST = 18;
const CONTRAST_TO_STRENGTH_RATIO = DEFAULT_CONTRAST / DEFAULT_STRENGTH;
const MATRIX_ALPHA_OFFSET_RATIO = -0.5;

export interface GooeyFilterProps {
  as?: ElementType;
  children: ReactNode;
  className?: string;