[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@paper-design/shaders": "0.0.69", "classnames": "2.5.1", "framer-motion": "12.26.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" import type { VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { toggleVariants } from "@/components/ui/toggle" const ToggleGroupContext = React.createContext>({ size: "default", variant: "default", }) function ToggleGroup({ className, variant, size, children, ...props }: React.ComponentProps & VariantProps) { return ( {children} ) } function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps & VariantProps) { const context = React.useContext(ToggleGroupContext) return ( {children} ) } export { ToggleGroup, ToggleGroupItem, ToggleGroupItem as Toggle } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="hooks/use-window-size.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export function useWindowSize() { const [windowSize, setWindowSize] = useState<{ width: number | undefined height: number | undefined }>({ width: undefined, height: undefined, }) useEffect(() => { function handleResize() { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }) } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return windowSize } [V0_FILE]typescriptreact:file="hooks/use-detect-safari.ts" isMerged="true" "use client" import { useState, useEffect } from "react" export function useSafariDetection() { const [isSafari, setIsSafari] = useState(false) useEffect(() => { const ua = navigator.userAgent.toLowerCase() const isSafariBrowser = ua.includes("safari") && !ua.includes("chrome") setIsSafari(isSafariBrowser) }, []) return isSafari } [V0_FILE]typescriptreact:file="components/exclusion-tabs.tsx" isEdit="true" isMerged="true" "use client" import { useMemo } from "react" import { useWindowSize } from "@/hooks/use-window-size" import { motion } from "framer-motion" import { useSafariDetection } from "@/hooks/use-detect-safari" const tabItems = ["Text", "Icon"] interface ExclusionTabsProps { viewMode: "text" | "icon" onViewModeChange: (mode: "text" | "icon") => void } export default function ExclusionTabs({ viewMode, onViewModeChange }: ExclusionTabsProps) { const isSafari = useSafariDetection() const { width = 0 } = useWindowSize() const isMobile = useMemo(() => width <= 768, [width]) const activeTab = viewMode === "text" ? 0 : 1 const handleTabClick = (index: number) => { onViewModeChange(index === 0 ? "text" : "icon") } if (isSafari) { return (

Some interactive elements are not available in Safari due to compatibility issues. Please try another browser for the full experience.

) } return (

{tabItems.map((item, index) => ( handleTabClick(index)} > {item} ))}

) } [V0_FILE]typescriptreact:file="components/liquid-metal-button.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect, useMemo } from "react" import { Sparkles } from "lucide-react" interface LiquidMetalButtonProps { label?: string onClick?: () => void viewMode?: "text" | "icon" } export function LiquidMetalButton({ label = "Get Started", onClick, viewMode = "text" }: LiquidMetalButtonProps) { const [isHovered, setIsHovered] = useState(false) const [isPressed, setIsPressed] = useState(false) const [ripples, setRipples] = useState>([]) const shaderRef = useRef(null) const shaderMount = useRef(null) const buttonRef = useRef(null) const rippleId = useRef(0) const dimensions = useMemo(() => { if (viewMode === "icon") { return { width: 46, height: 46, innerWidth: 42, innerHeight: 42, shaderWidth: 46, shaderHeight: 46, } } else { return { width: 142, height: 46, innerWidth: 138, innerHeight: 42, shaderWidth: 142, shaderHeight: 46, } } }, [viewMode]) useEffect(() => { const styleId = "shader-canvas-style-exploded" if (!document.getElementById(styleId)) { const style = document.createElement("style") style.id = styleId style.textContent = ` .shader-container-exploded canvas { width: 100% !important; height: 100% !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; border-radius: 100px !important; } @keyframes ripple-animation { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } } ` document.head.appendChild(style) } const loadShader = async () => { try { const { liquidMetalFragmentShader, ShaderMount } = await import("@paper-design/shaders") if (shaderRef.current) { if (shaderMount.current?.destroy) { shaderMount.current.destroy() } shaderMount.current = new ShaderMount( shaderRef.current, liquidMetalFragmentShader, { u_repetition: 4, u_softness: 0.5, u_shiftRed: 0.3, u_shiftBlue: 0.3, u_distortion: 0, u_contour: 0, u_angle: 45, u_scale: 8, u_shape: 1, u_offsetX: 0.1, u_offsetY: -0.1, }, undefined, 0.6, ) } } catch (error) { console.error("[v0] Failed to load shader:", error) } } loadShader() return () => { if (shaderMount.current?.destroy) { shaderMount.current.destroy() shaderMount.current = null } } }, [dimensions.width, dimensions.height]) const handleMouseEnter = () => { setIsHovered(true) shaderMount.current?.setSpeed?.(1) } const handleMouseLeave = () => { setIsHovered(false) setIsPressed(false) shaderMount.current?.setSpeed?.(0.6) } const handleClick = (e: React.MouseEvent) => { if (shaderMount.current?.setSpeed) { shaderMount.current.setSpeed(2.4) setTimeout(() => { if (isHovered) { shaderMount.current?.setSpeed?.(1) } else { shaderMount.current?.setSpeed?.(0.6) } }, 300) } if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const ripple = { x, y, id: rippleId.current++ } setRipples((prev) => [...prev, ripple]) setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== ripple.id)) }, 600) } onClick?.() } return (

{viewMode === "icon" && ( )} {viewMode === "text" && ( {label} )}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { LiquidMetalButton } from "@/components/liquid-metal-button" import { ViewModeToggle } from "@/components/view-mode-toggle" import { useState } from "react" export default function Page() { const [viewMode, setViewMode] = useState<"text" | "icon">("text") return (

) } [V0_FILE]typescriptreact:file="components/view-mode-toggle.tsx" isEdit="true" "use client" import { useState } from "react" import { Type, Sparkles } from "lucide-react" interface ViewModeToggleProps { viewMode: "text" | "icon" onViewModeChange: (mode: "text" | "icon") => void } export function ViewModeToggle({ viewMode, onViewModeChange }: ViewModeToggleProps) { const [isHovered, setIsHovered] = useState(false) return (

{/* Active indicator */}

{/* Text button */} {/* Icon button */}

) }

About

Tags

Share

More from abilshr

More Templates Like This

About

Tags

Share

About

Tags

Share

More from abilshr

More Templates Like This