Gooey Popover

A GooeyPopover renders a trigger and content that animates open and closed. It uses smooth transitions and adjusts position based on side and offset. Use it to display content with a gooey effect when triggered.

byEdu Calvo from Smoothui

Installation

terminal

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

npx layro-cli add @educlopez/gooey-popover

npx layro-cli add @educlopez/gooey-popover

bunx layro-cli add @educlopez/gooey-popover

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 gsap from "gsap";
import { useCallback, useEffect, useId, useRef, useState } from "react";
import { useClickOutside } from "./use-click-outside";

const MEASURE_DELAY_SHORT = 100;
const MEASURE_DELAY_LONG = 500;
const DEFAULT_TRIGGER_SIZE = 44;
const DEFAULT_CONTENT_WIDTH = 240;
const DEFAULT_SIDE_OFFSET = 24;
const DEFAULT_SPEED = 0.25;
const GOO_STD_DEVIATION = 10;