{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footer-pulse-links", "type": "registry:block", "title": "Footer Pulse Links", "description": "A dark site footer where every link label rolls up letter by letter into lime on hover while a heartbeat line draws itself in underneath, closed by a wordmark fitted to the column whose letters rise in and then lift and tilt toward the pointer.", "dependencies": [ "gsap", "@gsap/react" ], "registryDependencies": [], "cssVars": { "theme": {} }, "files": [ { "path": "components/tweenui/footer-pulse-links.tsx", "type": "registry:component", "target": "components/tweenui/footer-pulse-links.tsx", "content": "'use client';\n\nimport { useId, useRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';\nimport { useGSAP } from '@gsap/react';\nimport gsap from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { cn } from '@/lib/utils';\n\ngsap.registerPlugin(useGSAP, ScrollTrigger);\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst canHover = () =>\n typeof window !== 'undefined' && window.matchMedia('(hover: hover) and (pointer: fine)').matches;\n\nexport type FooterPulseSocialIcon = 'x' | 'instagram' | 'linkedin' | 'dribbble' | 'github';\n\nexport interface FooterPulseLink {\n label: string;\n href: string;\n}\n\nexport interface FooterPulseColumn {\n heading: string;\n links: FooterPulseLink[];\n}\n\nexport interface FooterPulseSocial {\n label: string;\n href: string;\n icon: FooterPulseSocialIcon;\n}\n\nexport interface FooterPulseLinksProps extends ComponentPropsWithoutRef<'footer'> {\n brand?: string;\n logo?: ReactNode;\n description?: string;\n columns?: FooterPulseColumn[];\n socials?: FooterPulseSocial[];\n legal?: FooterPulseLink[];\n copyright?: string;\n}\n\nconst REPO = 'https://github.com/StaticMania/tween-ui';\n\nconst DEFAULT_COLUMNS: FooterPulseColumn[] = [\n {\n heading: 'Components',\n links: [\n { label: 'All components', href: '/components' },\n { label: 'Icon Trail Button', href: '/component/icon-trail-button' },\n { label: 'Sliding Tabs', href: '/component/sliding-tabs' },\n { label: 'Number Counter', href: '/component/number-counter' },\n ],\n },\n {\n heading: 'Blocks',\n links: [\n { label: 'All blocks', href: '/components#blocks' },\n { label: 'Kinetic Type Ring', href: '/block/kinetic-type-ring' },\n { label: 'Pricing Plan Switch', href: '/block/pricing-plan-switch' },\n { label: 'Shutter Slider', href: '/block/shutter-slider' },\n ],\n },\n {\n heading: 'Community',\n links: [\n { label: 'GitHub', href: REPO },\n { label: 'Report an issue', href: `${REPO}/issues` },\n ],\n },\n];\n\nconst DEFAULT_SOCIALS: FooterPulseSocial[] = [{ label: 'GitHub', href: REPO, icon: 'github' }];\n\nconst DEFAULT_LEGAL: FooterPulseLink[] = [\n { label: 'MIT License', href: `${REPO}/blob/main/LICENSE` },\n { label: 'Changelog', href: `${REPO}/blob/main/CHANGELOG.md` },\n { label: 'Contributing', href: `${REPO}/blob/main/CONTRIBUTING.md` },\n];\n\nconst TWEEN_MARK = (\n \n \n \n \n \n);\n\nconst EASE_OUT = 'ease-[cubic-bezier(0.16,1,0.3,1)]';\n\nconst EASE_ROLL = 'ease-[cubic-bezier(0.45,0,0.15,1)]';\n\nconst focusRing =\n 'rounded-xs focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#c6f56f]';\n\nconst SOCIAL_PATHS: Record = {\n x: (\n \n ),\n instagram: (\n <>\n \n \n \n \n ),\n linkedin: (\n <>\n \n \n \n \n ),\n dribbble: (\n <>\n \n \n \n \n \n ),\n github: (\n <>\n \n \n \n ),\n};\n\nconst isExternal = (href: string) => /^https?:/.test(href);\n\nconst externalProps = (href: string) =>\n isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {};\n\nconst RollLabel = ({ label }: { label: string }) => {\n return (\n <>\n {label}\n \n {Array.from(label).map((char, index) => (\n \n {char}\n \n ))}\n \n \n );\n};\n\nconst PulseUnderline = () => {\n return (\n \n \n \n );\n};\n\nconst PulseLink = ({ link, className }: { link: FooterPulseLink; className?: string }) => {\n return (\n \n \n \n \n );\n};\n\nconst LinkGroup = ({ column }: { column: FooterPulseColumn }) => {\n const headingId = useId();\n\n return (\n
\n

\n {column.heading}\n

\n
    \n {column.links.map((link) => (\n
  • \n \n
    • \n ))}\n
\n
\n );\n};\n\nconst LIFT_SETTLE_MS = 160;\n\nconst followPointer = (mark: HTMLElement, letters: HTMLElement[]) => {\n const lifts = letters.map(() => 0);\n const tilts = letters.map(() => 0);\n const pointer = { x: 0, y: 0, isInside: false };\n let centers: { x: number; y: number }[] = [];\n let frame = 0;\n let lastTime = 0;\n\n const measure = () => {\n centers = letters.map((letter) => ({\n x: letter.offsetLeft + letter.offsetWidth / 2,\n y: letter.offsetTop + letter.offsetHeight / 2,\n }));\n };\n\n const tick = (time: number) => {\n frame = 0;\n const elapsed = lastTime ? Math.min(64, time - lastTime) : 16;\n lastTime = time;\n const blend = 1 - Math.exp(-elapsed / LIFT_SETTLE_MS);\n if (centers.length !== letters.length) measure();\n\n const size = parseFloat(getComputedStyle(mark).fontSize) || 120;\n const maxLift = Math.min(70, size * 0.18);\n const radius = size * 1.9 + 170;\n const origin = mark.getBoundingClientRect();\n let isMoving = false;\n\n letters.forEach((letter, index) => {\n const center = centers[index] ?? { x: 0, y: 0 };\n const dx = pointer.x - (origin.left + center.x);\n const dy = pointer.y - (origin.top + center.y);\n const reach = pointer.isInside ? Math.max(0, 1 - Math.hypot(dx, dy) / radius) : 0;\n const eased = reach * reach * (3 - 2 * reach);\n const side = Math.max(-1, Math.min(1, dx / (radius * 0.35)));\n const lift = (lifts[index] ?? 0) + (eased * maxLift - (lifts[index] ?? 0)) * blend;\n const tilt = (tilts[index] ?? 0) + (-side * eased * 4.5 - (tilts[index] ?? 0)) * blend;\n if (Math.abs(eased * maxLift - lift) > 0.05 || Math.abs(-side * eased * 4.5 - tilt) > 0.01) {\n isMoving = true;\n }\n lifts[index] = lift;\n tilts[index] = tilt;\n letter.style.transform = `translate3d(0, ${(-lift).toFixed(3)}px, 0) rotate(${tilt.toFixed(3)}deg)`;\n });\n\n if (isMoving || pointer.isInside) {\n frame = requestAnimationFrame(tick);\n } else {\n lastTime = 0;\n }\n };\n\n const wake = () => {\n if (!frame) frame = requestAnimationFrame(tick);\n };\n\n const handleMove = (event: PointerEvent) => {\n pointer.x = event.clientX;\n pointer.y = event.clientY;\n pointer.isInside = true;\n wake();\n };\n\n const handleLeave = () => {\n pointer.isInside = false;\n wake();\n };\n\n const observer = new ResizeObserver(measure);\n observer.observe(mark);\n mark.addEventListener('pointermove', handleMove);\n mark.addEventListener('pointerleave', handleLeave);\n\n return () => {\n observer.disconnect();\n mark.removeEventListener('pointermove', handleMove);\n mark.removeEventListener('pointerleave', handleLeave);\n cancelAnimationFrame(frame);\n letters.forEach((letter) => {\n letter.style.transform = '';\n });\n };\n};\n\nconst FooterPulseLinks = ({\n brand = 'Tween UI',\n logo = TWEEN_MARK,\n description = 'GSAP & CSS animated components for React. Copy the source, own the animation.',\n columns = DEFAULT_COLUMNS,\n socials = DEFAULT_SOCIALS,\n legal = DEFAULT_LEGAL,\n copyright,\n className,\n ...props\n}: FooterPulseLinksProps) => {\n const rootRef = useRef(null);\n const boxRef = useRef(null);\n const markRef = useRef(null);\n const wordRef = useRef(null);\n\n useGSAP(\n () => {\n const box = boxRef.current;\n const mark = markRef.current;\n const word = wordRef.current;\n if (!box || !mark || !word) return;\n\n let fittedFor = 0;\n const fit = () => {\n const width = box.clientWidth;\n if (!width || width === fittedFor) return;\n fittedFor = width;\n mark.style.fontSize = '';\n const size = parseFloat(getComputedStyle(mark).fontSize);\n const trailing = parseFloat(getComputedStyle(word).letterSpacing) || 0;\n const ink = word.offsetWidth - trailing;\n if (ink > 0) mark.style.fontSize = `${(size * width) / ink}px`;\n };\n const observer = new ResizeObserver(fit);\n observer.observe(box);\n fit();\n\n const fonts = typeof document !== 'undefined' ? document.fonts?.ready : undefined;\n fonts?.then(() => {\n fittedFor = 0;\n fit();\n });\n\n const letters = Array.from(word.querySelectorAll('[data-letter]'));\n let stopFollowing: (() => void) | null = null;\n const startFollowing = () => {\n if (canHover()) stopFollowing = followPointer(mark, letters);\n };\n\n const reduce = prefersReducedMotion();\n const entrance = reduce\n ? null\n : gsap.fromTo(\n letters,\n { autoAlpha: 0, y: 46 },\n {\n autoAlpha: 1,\n y: 0,\n duration: 0.62,\n ease: 'power3.out',\n stagger: 0.04,\n paused: true,\n onComplete: () => {\n gsap.set(letters, { clearProps: 'transform,opacity,visibility' });\n startFollowing();\n },\n }\n );\n\n const trigger = entrance\n ? ScrollTrigger.create({\n trigger: box,\n start: 'top 95%',\n once: true,\n onEnter: () => entrance.play(),\n })\n : null;\n\n if (reduce) startFollowing();\n\n return () => {\n observer.disconnect();\n trigger?.kill();\n entrance?.kill();\n stopFollowing?.();\n mark.style.fontSize = '';\n };\n },\n { scope: rootRef, dependencies: [brand] }\n );\n\n const notice = copyright ?? `© ${new Date().getFullYear()} ${brand}`;\n const lastWordStart = brand.lastIndexOf(' ') + 1;\n\n return (\n \n \n \n \n \n\n
\n
\n
\n \n {logo}\n {brand}\n \n

{description}

\n {socials.length > 0 ? (\n
    \n {socials.map((social) => (\n
  • \n \n \n {SOCIAL_PATHS[social.icon]}\n \n \n
    • \n ))}\n
\n ) : null}\n
\n\n \n
\n\n
\n \n \n {Array.from(brand).map((char, index) => (\n = lastWordStart\n ? 'bg-[linear-gradient(to_top,rgb(198_245_111/0.15)_13%,rgb(198_245_111/0.95)_100%)]'\n : 'bg-[linear-gradient(to_top,rgb(232_243_242/0.12)_4%,rgb(240_248_247/0.82)_38%,rgb(255_255_255/1)_100%)]'\n )}\n >\n {char}\n \n ))}\n \n

\n
\n\n
\n

\n {notice}\n

\n
    \n {legal.map((link) => (\n
  • \n \n
    • \n ))}\n
\n
\n
\n \n );\n};\n\nexport default FooterPulseLinks;\n" } ], "docs": "Docs, props and examples: https://tween-ui.vercel.app/block/footer-pulse-links\nGSAP plugins (ScrollTrigger) are registered inside the component, so there is nothing to set up.\nPass your own `columns`, `socials` and `legal` links; the link hover is plain CSS and only the wordmark uses GSAP." }