[V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "light-rays-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@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", "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", "framer-motion": "^11.15.0", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.0.0", "next-themes": "^0.4.4", "react": "^18.0.0", "react-dom": "^18.0.0", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "ogl": "^1.0.6" }, "devDependencies": { "@types/node": "^20.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5.0.0" } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-dm-sans)", "system-ui", "sans-serif"], }, colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { AnimatedSpotlightHero } from "../components/animated-spotlight-hero" export default function Page() { return } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { DM_Sans } from 'next/font/google' import "./globals.css" // import "./estilo.css" import "./realistic-switch.css" const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-dm-sans", }) export const metadata: Metadata = { title: "Animated Spotlight", description: "Animated Spotlight", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]plaintext:file="src/.gitkeep" isMerged="true" [V0_FILE]plaintext:file="src/hooks/.gitkeep" isMerged="true" [V0_FILE]typescript:file="src/hooks/use-gravity-effect.ts" isMerged="true" // src/hooks/use-gravity-effect.ts "use client" import { useEffect, type MutableRefObject } from "react" import type { MotionValue } from "framer-motion" interface GravityEffectProps { anchor: { x: number; y: number } restPosition: { x: number; y: number } x: MotionValue y: MotionValue rotation: MotionValue isDraggingRef: MutableRefObject } export function useGravityEffect({ anchor, restPosition, x, y, rotation, isDraggingRef }: GravityEffectProps) { useEffect(() => { // Adicionamos de volta as variáveis para um controle de física mais fino const velocityX = { current: 0 } const velocityY = { current: 0 } const bounceCountX = { current: 0 } const bounceCountY = { current: 0 } const lastVelocityX = { current: 0 } const lastVelocityY = { current: 0 } let frameId: number let lastTime = performance.now() const applyGravity = (currentTime: number) => { const deltaTime = Math.min((currentTime - lastTime) / 16, 2) lastTime = currentTime if (isDraggingRef.current) { // Reinicia os contadores quando começamos a arrastar velocityX.current = x.getVelocity() / 60 velocityY.current = y.getVelocity() / 60 bounceCountX.current = 0 bounceCountY.current = 0 frameId = requestAnimationFrame(applyGravity) return } const currentY = y.get() const currentX = x.get() const dx = restPosition.x - currentX const dy = restPosition.y - currentY // A força da mola (elasticidade) const springForceX = dx * 0.04 * deltaTime const springForceY = dy * 0.04 * deltaTime velocityX.current += springForceX velocityY.current += springForceY // Detecta as "quicadas" para aumentar o amortecimento if (Math.sign(velocityX.current) !== Math.sign(lastVelocityX.current) && lastVelocityX.current !== 0) { bounceCountX.current += 1 } if (Math.sign(velocityY.current) !== Math.sign(lastVelocityY.current) && lastVelocityY.current !== 0) { bounceCountY.current += 1 } lastVelocityX.current = velocityX.current lastVelocityY.current = velocityY.current // AMORTECIMENTO INTELIGENTE: Fica mais forte a cada "quicada" const baseDamping = 0.96 const progressiveDampingX = Math.pow(baseDamping, 1 + bounceCountX.current * 0.3) const progressiveDampingY = Math.pow(baseDamping, 1 + bounceCountY.current * 0.3) velocityX.current *= progressiveDampingX velocityY.current *= progressiveDampingY x.set(currentX + velocityX.current) y.set(currentY + velocityY.current) const positionOffset = (currentX - anchor.x) / 30 const velocityOffset = velocityX.current / 8 rotation.set(positionOffset + velocityOffset) frameId = requestAnimationFrame(applyGravity) } frameId = requestAnimationFrame(applyGravity) return () => { cancelAnimationFrame(frameId) } }, [anchor, restPosition, x, y, rotation, isDraggingRef]) } [V0_FILE]typescript:file="src/hooks/use-init-elastic-box-positions.ts" isMerged="true" // src/hooks/use-init-elastic-box-positions.ts "use client" import { useState, useEffect, type RefObject } from "react" import type { MotionValue } from "framer-motion" interface PositionState { isPositioned: boolean anchor: { x: number; y: number } restPosition: { x: number; y: number } } export function useInitElasticBoxPositions( containerRef: RefObject, x: MotionValue, y: MotionValue, ): PositionState { const [positionState, setPositionState] = useState({ isPositioned: false, anchor: { x: 0, y: 0 }, restPosition: { x: 0, y: 0 }, }) useEffect(() => { const updatePositions = () => { if (!containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const centerX = rect.width / 2 const newPositions = { isPositioned: true, anchor: { x: centerX, y: 0 }, // 2. LUMINÁRIA POSICIONADA MAIS ALTA // Um valor menor (0.15) significa mais perto do topo da tela. restPosition: { x: centerX, y: rect.height * 0.15 }, } setPositionState(newPositions) if (!positionState.isPositioned) { x.set(newPositions.restPosition.x) y.set(newPositions.restPosition.y) } } updatePositions() window.addEventListener("resize", updatePositions) return () => window.removeEventListener("resize", updatePositions) }, [containerRef, x, y, positionState.isPositioned]) return positionState } [V0_FILE]typescriptreact:file="components/light-rays.tsx" isEdit="true" isQuickEdit="true" isMerged="true" // light-rays.tsx "use client" import type React from "react" import { Mesh, Program, Renderer, Triangle } from "ogl" import { useEffect, useRef, useState } from "react" import type { MotionValue } from "framer-motion" export type RaysOrigin = "top-center" | "top-left" | "top-right" | "right" | "left" | "bottom-center" | "bottom-right" | "bottom-left" interface LightRaysProps { raysOrigin?: RaysOrigin raysColor?: string raysSpeed?: number lightSpread?: number rayLength?: number pulsating?: boolean fadeDistance?: number saturation?: number mouseInfluence?: number noiseAmount?: number distortion?: number className?: string introAnimation?: boolean dynamicOrigin?: { x: MotionValue; y: MotionValue } | null } const DEFAULT_COLOR = "#ffffff" const hexToRgb = (hex: string): [number, number, number] => { const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) return m ? [Number.parseInt(m[1], 16) / 255, Number.parseInt(m[2], 16) / 255, Number.parseInt(m[3], 16) / 255] : [1, 1, 1] } const getAnchorAndDir = (origin: RaysOrigin, w: number, h: number): { anchor: [number, number]; dir: [number, number] } => { const outside = 0.2 switch (origin) { case "top-left": return { anchor: [0, -outside * h], dir: [0, 1] } case "top-right": return { anchor: [w, -outside * h], dir: [0, 1] } case "left": return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] } case "right": return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] } case "bottom-left": return { anchor: [0, (1 + outside) * h], dir: [0, -1] } case "bottom-center": return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] } case "bottom-right": return { anchor: [w, (1 + outside) * h], dir: [0, -1] } default: return { anchor: [0.5 * w, -outside * h], dir: [0, 1] } } } const LightRays: React.FC = ({ raysOrigin = "top-center", raysColor = DEFAULT_COLOR, raysSpeed = 1, lightSpread = 1, rayLength = 2, pulsating = false, fadeDistance = 1.0, saturation = 1.0, mouseInfluence = 0.1, noiseAmount = 0.0, distortion = 0.0, className = "", introAnimation = true, dynamicOrigin = null, }) => { const containerRef = useRef(null) const uniformsRef = useRef | null>(null) const rendererRef = useRef(null) const [isVisible, setIsVisible] = useState(false) const observerRef = useRef(null) useEffect(() => { if (!containerRef.current) return observerRef.current = new IntersectionObserver((entries) => setIsVisible(entries[0].isIntersecting), { threshold: 0.1 }) observerRef.current.observe(containerRef.current) return () => observerRef.current?.disconnect() }, []) useEffect(() => { if (!isVisible || !containerRef.current) return let cleanupFunction: (() => void) | null = null const initializeWebGL = () => { if (!containerRef.current) return const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio, 2), alpha: true }) rendererRef.current = renderer const gl = renderer.gl gl.canvas.style.width = "100%"; gl.canvas.style.height = "100%"; containerRef.current.innerHTML = ""; containerRef.current.appendChild(gl.canvas) const vert = `attribute vec2 position; varying vec2 vUv; void main() { vUv = position * 0.5 + 0.5; gl_Position = vec4(position, 0.0, 1.0); }` const frag = `precision highp float; uniform float iTime; uniform vec2 iResolution; uniform vec2 rayPos; uniform vec2 rayDir; uniform vec3 raysColor; uniform float raysSpeed; uniform float lightSpread; uniform float rayLength; uniform float pulsating; uniform float fadeDistance; uniform float saturation; uniform float mouseInfluence; uniform float noiseAmount; uniform float distortion; uniform float uIntro; varying vec2 vUv; float noise(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord, float seedA, float seedB, float speed) { vec2 sourceToCoord = coord - raySource; vec2 dirNorm = normalize(sourceToCoord); float cosAngle = dot(dirNorm, rayRefDirection); float distortedAngle = cosAngle; if (distortion > 0.0) { distortedAngle += distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2; } float spreadFactor = pow(max(distortedAngle, 0.0), 1.8 / max(lightSpread, 0.001)); float distance = length(sourceToCoord); float maxDistance = iResolution.x * rayLength; float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0); float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0); float pulse = 1.0; if (pulsating > 0.5) { pulse = 0.9 + 0.1 * sin(iTime * speed); } float baseStrength = 1.0; return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse; } void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y); vec2 finalRayDir = rayDir; vec4 rays1 = vec4(1.0) * rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349, 1.5 * raysSpeed); vec4 rays2 = vec4(1.0) * rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234, 1.1 * raysSpeed); fragColor = rays1 * 1.0 + rays2 * 0.8; if (noiseAmount > 0.0) { float n = noise(coord * 0.01 + iTime * 0.1); fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n); } float brightness = smoothstep(0.0, 0.8, 1.0 - (coord.y / iResolution.y)); fragColor.rgb *= 0.5 + brightness * 0.5; if (saturation != 1.0) { float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114)); fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation); } fragColor.rgb *= raysColor; fragColor.a *= uIntro; } void main() { vec4 color; mainImage(color, gl_FragCoord.xy); gl_FragColor = color; }` const uniforms = { iTime: { value: 0 }, iResolution: { value: [1, 1] }, rayPos: { value: [0, 0] }, rayDir: { value: [0, 1] }, raysColor: { value: hexToRgb(raysColor) }, raysSpeed: { value: raysSpeed }, lightSpread: { value: lightSpread }, rayLength: { value: rayLength }, pulsating: { value: pulsating ? 1.0 : 0.0 }, fadeDistance: { value: fadeDistance }, saturation: { value: saturation }, mouseInfluence: { value: mouseInfluence }, noiseAmount: { value: noiseAmount }, distortion: { value: distortion }, uIntro: { value: introAnimation ? 0 : 1 }, }; uniformsRef.current = uniforms const geometry = new Triangle(gl) const program = new Program(gl, { vertex: vert, fragment: frag, uniforms }) const mesh = new Mesh(gl, { geometry, program }) const updatePlacement = () => { if (!containerRef.current || !renderer) return renderer.dpr = Math.min(window.devicePixelRatio, 2) const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current renderer.setSize(wCSS, hCSS) const dpr = renderer.dpr; const w = wCSS * dpr; const h = hCSS * dpr uniforms.iResolution.value = [w, h] if (!dynamicOrigin) { const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h) uniforms.rayPos.value = anchor uniforms.rayDir.value = dir } } if (introAnimation) { let startTime: number | null = null; const duration = 2500 const animateIntro = (currentTime: number) => { if (startTime === null) startTime = currentTime let progress = Math.min((currentTime - startTime) / duration, 1) progress = 1 - (1 - progress) ** 3 if (uniformsRef.current) uniformsRef.current.uIntro.value = progress if (progress < 1) requestAnimationFrame(animateIntro) } requestAnimationFrame(animateIntro) } let animationId: number const loop = (t: number) => { if (!uniformsRef.current) return uniformsRef.current.iTime.value = t * 0.001 renderer.render({ scene: mesh }) animationId = requestAnimationFrame(loop) } window.addEventListener("resize", updatePlacement) updatePlacement() animationId = requestAnimationFrame(loop) const unsubX = dynamicOrigin?.x.onChange(v => { if (uniformsRef.current) uniformsRef.current.rayPos.value[0] = v * renderer.dpr }) const unsubY = dynamicOrigin?.y.onChange(v => { if (uniformsRef.current) uniformsRef.current.rayPos.value[1] = v * renderer.dpr }) cleanupFunction = () => { cancelAnimationFrame(animationId) window.removeEventListener("resize", updatePlacement) unsubX?.(); unsubY?.() renderer.gl.getExtension('WEBGL_lose_context')?.loseContext() } } initializeWebGL() return () => cleanupFunction?.() }, [isVisible, raysOrigin, raysColor, raysSpeed, lightSpread, rayLength, pulsating, fadeDistance, saturation, mouseInfluence, noiseAmount, distortion, introAnimation, dynamicOrigin]) return

} export default LightRays [V0_FILE]typescriptreact:file="components/lamp.tsx" isMerged="true" // src/components/lamp.tsx "use client" import { motion, type MotionValue } from "framer-motion" interface LampProps { x: MotionValue y: MotionValue rotation: MotionValue anchor: { x: number; y: number } isLightOn: boolean onPointerDown: (e: React.PointerEvent) => void onCordPull: () => void } export function Lamp({ x, y, rotation, anchor, isLightOn, onPointerDown, onCordPull }: LampProps) { return ( <> {/* */} Lâmpada pendurada

) } [V0_FILE]plaintext:file="public/.gitkeep" isMerged="true" [V0_FILE]css:file="app/estilo.css" isMerged="true" * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --fg: hsl(var(--hue),10%,10%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.83, 0, 0.17, 1); font-size: calc(30px + (60 - 30) * (100vw - 320px) / (2560 - 320)); } main, label, .col { display: flex; } main { flex-direction: column; width: 100%; } label { align-items: center; margin: auto; -webkit-tap-highlight-color: transparent; } .col { background-color: hsl(var(--hue),10%,90%); background-image: linear-gradient(hsla(0,0%,0%,0),hsla(0,0%,0%,0.4)); padding: 1.5em; width: 100%; height: 100%; } .sr { overflow: hidden; position: absolute; width: 1px; height: 1px; } /* Light theme */ .switch, .switch__input { display: block; } .switch { border-radius: 1.5em; box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4); position: relative; width: 4.5em; height: 3em; perspective: 10em; } .switch span { display: block; } .switch > span { border-radius: inherit; z-index: 1; } .switch__surface-glare, .switch__inner, .switch__inner-glare, .switch__rocker-sides, .switch__rocker-sides-glare, .switch__rocker, .switch__rocker-glare, .switch__light { transition: transform var(--trans-dur) var(--trans-timing); } .switch__surface { background-color: hsl(var(--hue),10%,83%); overflow: hidden; width: 100%; height: 100%; } .switch > .switch__surface { z-index: 0; } .switch__surface-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0)); width: 3em; height: 3em; transform: translate(0,0.125em); } .switch__input { background-color: hsl(var(--hue),10%,80%); border-radius: 1.5em; box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0); outline: transparent; position: absolute; top: 0.0625em; left: 0.0625em; width: calc(100% - 0.125em); height: calc(100% - 0.125em); transition: box-shadow 0.15s linear; z-index: 1; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .switch__input:focus-visible { box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,1); } .switch__inner { background-color: hsl(var(--hue),10%,83%); overflow: hidden; position: absolute; inset: 0.5em; transform: translate(0.125em,0); } .switch__inner-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0)); position: absolute; width: 2em; height: 2em; transform: translate(100%,-0.5em); } .switch__inner-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4); position: absolute; inset: 0.5em; } .switch__rocker-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.15); position: absolute; top: 0.5625em; right: 0.5625em; bottom: 0.5625em; left: 0.75em; } .switch__rocker-sides { background-color: hsl(var(--hue),10%,80%); overflow: hidden; position: absolute; inset: 0.5em; transform: rotateY(-20deg) translateZ(0.5em); transform-style: preserve-3d; } .switch__rocker-sides-glare { background-image: linear-gradient(90deg,hsla(var(--hue),10%,85%,0),hsla(var(--hue),10%,85%,1),hsla(var(--hue),10%,85%,0)); position: absolute; width: 200%; height: 100%; } .switch__rocker { background-color: hsl(var(--hue),10%,80%); overflow: hidden; position: absolute; inset: 0.5625em; transform: rotateY(-20deg) translateZ(0.5em); transform-style: preserve-3d; } .switch__rocker-glare { background-image: linear-gradient(120deg,hsla(var(--hue),10%,85%,0) 25%,hsla(var(--hue),10%,85%,1) 50%,hsla(var(--hue),10%,85%,0) 75%); position: absolute; width: 100%; height: 100%; transform: translateX(-33%); } .switch__light { background-image: linear-gradient(-45deg,hsl(var(--hue),10%,60%) 30%,hsl(var(--hue),10%,80%)); box-shadow: 0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset; position: absolute; top: 50%; left: 50%; width: 0.5em; height: 0.5em; transform: translate(-50%,-50%) rotateY(-20deg) translateX(1.125em) translateZ(0.51em); } .switch__light-inner { background-color: hsl(133,90%,50%); box-shadow: 0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset, 0 0 0.25em hsl(133,90%,50%); border-radius: 50%; opacity: 0; width: 100%; height: 100%; transition: opacity var(--trans-dur) var(--trans-timing); } /* Dark theme */ .col--dark { background-color: hsl(var(--hue),10%,10%); color: hsl(var(--hue),10%,90%); } .col--dark .switch__surface { background-color: hsl(var(--hue),10%,22%); } .col--dark .switch__surface-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0)); } .col--dark .switch__input { background-color: hsl(var(--hue),10%,20%); } .col--dark .switch__inner { background-color: hsl(var(--hue),10%,22%); } .col--dark .switch__inner-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0)); } .col--dark .switch__rocker-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.5); } .col--dark .switch__rocker-sides { background-color: hsl(var(--hue),10%,20%); } .col--dark .switch__rocker-sides-glare { background-image: linear-gradient(90deg,hsla(var(--hue),10%,35%,0),hsla(var(--hue),10%,35%,1),hsla(var(--hue),10%,35%,0)); } .col--dark .switch__rocker { background-color: hsl(var(--hue),10%,20%); } .col--dark .switch__rocker-glare { background-image: linear-gradient(120deg,hsla(var(--hue),10%,25%,0) 25%,hsla(var(--hue),10%,25%,1) 50%,hsla(var(--hue),10%,25%,0) 75%); } .col--dark .switch__light { background-image: linear-gradient(-45deg,hsl(var(--hue),10%,30%) 30%,hsl(var(--hue),10%,50%)); } /* “On” state */ .switch__input:checked ~ .switch__surface .switch__surface-glare { transform: translate(3em,0.125em); } .switch__input:checked ~ .switch__inner { transform: translate(-0.125em,0); } .switch__input:checked ~ .switch__inner .switch__inner-glare { transform: translate(0,-0.5em); } .switch__input:checked ~ .switch__rocker { transform: rotateY(20deg) translateZ(0.5em); } .switch__input:checked ~ .switch__rocker .switch__rocker-glare { transform: translateX(33%); } .switch__input:checked ~ .switch__rocker-sides { transform: rotateY(20deg) translateZ(0.5em); } .switch__input:checked ~ .switch__rocker-sides .switch__rocker-sides-glare { transform: translateX(-50%); } .switch__input:checked ~ .switch__light { transform: translate(-50%,-50%) rotateY(20deg) translateX(1.125em) translateZ(0.51em); } .switch__input:checked ~ .switch__light .switch__light-inner { opacity: 1; } [V0_FILE]typescriptreact:file="components/animated-spotlight-hero.tsx" isEdit="true" "use client" import { useState, useRef, useEffect } from "react" import { motion, useMotionValue, useTransform } from "framer-motion" import { BackgroundEffects } from "./shared/solution-hero-background" import { useGravityEffect } from "@/src/hooks/use-gravity-effect" import { useInitElasticBoxPositions } from "@/src/hooks/use-init-elastic-box-positions" import { Lamp } from "./lamp" import { RealisticSwitch } from "./realistic-switch" export function AnimatedSpotlightHero() { const containerRef = useRef(null) const isDraggingRef = useRef(false) const [isLightOn, setIsLightOn] = useState(true) const x = useMotionValue(0) const y = useMotionValue(0) const rotation = useMotionValue(0) const { isPositioned, anchor, restPosition } = useInitElasticBoxPositions(containerRef, x, y) useGravityEffect({ anchor, restPosition, x, y, rotation, isDraggingRef }) const handlePointerDown = (e: React.PointerEvent) => { isDraggingRef.current = true const target = e.target as HTMLElement target.setPointerCapture(e.pointerId) window.addEventListener("pointermove", handlePointerMove) window.addEventListener("pointerup", handlePointerUp) } const handlePointerMove = (e: React.PointerEvent) => { if (isDraggingRef.current && containerRef.current) { const rect = containerRef.current.getBoundingClientRect() x.set(e.clientX - rect.left) y.set(e.clientY - rect.top) } } const handlePointerUp = () => { isDraggingRef.current = false window.removeEventListener("pointermove", handlePointerMove) window.removeEventListener("pointerup", handlePointerUp) } const handleToggle = () => { setIsLightOn((prev) => !prev) } return (

{isPositioned && ( )}

) } [V0_FILE]typescriptreact:file="components/realistic-switch.tsx" isEdit="true" "use client" interface RealisticSwitchProps { isOn: boolean; onToggle: () => void; orientation?: 'horizontal' | 'vertical'; } export function RealisticSwitch({ isOn, onToggle, orientation = 'horizontal' }: RealisticSwitchProps) { const switchClasses = `switch ${orientation === 'vertical' ? 'switch--vertical' : ''}`; const containerClasses = `switch-container ${!isOn ? 'switch-container--dark' : ''}`; return (

); } [V0_FILE]css:file="app/realistic-switch.css" isEdit="true" isQuickEdit="true" * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --fg: hsl(var(--hue),10%,10%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.83, 0, 0.17, 1); /* O font-size original para o corpo da página */ font-size: calc(30px + (60 - 30) * (100vw - 320px) / (2560 - 320)); } /* ============================================== */ /* === ÚNICA ALTERAÇÃO NECESSÁRIA FICA AQUI === */ /* ============================================== */ /* Define um font-size base 70% menor (30% do original) apenas para o container do switch */ .switch-container { font-size: calc(9px + (18 - 9) * (100vw - 320px) / (2560 - 320)); } main, label, .col { display: flex; } main { flex-direction: column; width: 100%; } label { align-items: center; margin: auto; -webkit-tap-highlight-color: transparent; } .col { background-color: hsl(var(--hue),10%,90%); background-image: linear-gradient(hsla(0,0%,0%,0),hsla(0,0%,0%,0.4)); padding: 1.5em; width: 100%; height: 100%; } .sr { overflow: hidden; position: absolute; width: 1px; height: 1px; } /* Light theme */ .switch, .switch__input { display: block; } .switch { border-radius: 1.5em; box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4); position: relative; width: 4.5em; height: 3em; perspective: 10em; } .switch span { display: block; } .switch > span { border-radius: inherit; z-index: 1; } .switch__surface-glare, .switch__inner, .switch__inner-glare, .switch__rocker-sides, .switch__rocker-sides-glare, .switch__rocker, .switch__rocker-glare, .switch__light { transition: transform var(--trans-dur) var(--trans-timing); } .switch__surface { background-color: hsl(var(--hue),10%,83%); overflow: hidden; width: 100%; height: 100%; } .switch > .switch__surface { z-index: 0; } .switch__surface-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0)); width: 3em; height: 3em; transform: translate(0,0.125em); } .switch__input { background-color: hsl(var(--hue),10%,80%); border-radius: 1.5em; box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0); outline: transparent; position: absolute; top: 0.0625em; left: 0.0625em; width: calc(100% - 0.125em); height: calc(100% - 0.125em); transition: box-shadow 0.15s linear; z-index: 1; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; } .switch__input:focus-visible { box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,1); } .switch__inner { background-color: hsl(var(--hue),10%,83%); overflow: hidden; position: absolute; inset: 0.5em; transform: translate(0.125em,0); } .switch__inner-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0)); position: absolute; width: 2em; height: 2em; transform: translate(100%,-0.5em); } .switch__inner-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4); position: absolute; inset: 0.5em; } .switch__rocker-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.15); position: absolute; top: 0.5625em; right: 0.5625em; bottom: 0.5625em; left: 0.75em; } .switch__rocker-sides { background-color: hsl(var(--hue),10%,80%); overflow: hidden; position: absolute; inset: 0.5em; transform: rotateY(-20deg) translateZ(0.5em); transform-style: preserve-3d; } .switch__rocker-sides-glare { background-image: linear-gradient(90deg,hsla(var(--hue),10%,85%,0),hsla(var(--hue),10%,85%,1),hsla(var(--hue),10%,85%,0)); position: absolute; width: 200%; height: 100%; } .switch__rocker { background-color: hsl(var(--hue),10%,80%); overflow: hidden; position: absolute; inset: 0.5625em; transform: rotateY(-20deg) translateZ(0.5em); transform-style: preserve-3d; } .switch__rocker-glare { background-image: linear-gradient(120deg,hsla(var(--hue),10%,85%,0) 25%,hsla(var(--hue),10%,85%,1) 50%,hsla(var(--hue),10%,85%,0) 75%); position: absolute; width: 100%; height: 100%; transform: translateX(-33%); } .switch__light { background-image: linear-gradient(-45deg,hsl(var(--hue),10%,60%) 30%,hsl(var(--hue),10%,80%)); box-shadow: 0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset; position: absolute; top: 50%; left: 50%; width: 0.5em; height: 0.5em; transform: translate(-50%,-50%) rotateY(-20deg) translateX(1.125em) translateZ(0.51em); } .switch__light-inner { background-color: hsl(133,90%,50%); box-shadow: 0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset, 0 0 0.25em hsl(133,90%,50%); border-radius: 50%; opacity: 0; width: 100%; height: 100%; transition: opacity var(--trans-dur) var(--trans-timing); } /* Dark theme */ .col--dark { background-color: hsl(var(--hue),10%,10%); color: hsl(var(--hue),10%,90%); } /* Apply dark theme to switch when light is off */ .switch-container--dark .switch__surface { background-color: hsl(var(--hue),10%,22%); } .switch-container--dark .switch__surface-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0)); } .switch-container--dark .switch__input { background-color: hsl(var(--hue),10%,20%); } .switch-container--dark .switch__inner { background-color: hsl(var(--hue),10%,22%); } .switch-container--dark .switch__inner-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0)); } .switch-container--dark .switch__rocker-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.5); } .switch-container--dark .switch__rocker-sides { background-color: hsl(var(--hue),10%,20%); } .switch-container--dark .switch__rocker-sides-glare { background-image: linear-gradient(90deg,hsla(var(--hue),10%,35%,0),hsla(var(--hue),10%,35%,1),hsla(var(--hue),10%,35%,0)); } .switch-container--dark .switch__rocker { background-color: hsl(var(--hue),10%,20%); } .switch-container--dark .switch__rocker-glare { background-image: linear-gradient(120deg,hsla(var(--hue),10%,25%,0) 25%,hsla(var(--hue),10%,25%,1) 50%,hsla(var(--hue),10%,25%,0) 75%); } .switch-container--dark .switch__light { background-image: linear-gradient(-45deg,hsl(var(--hue),10%,30%) 30%,hsl(var(--hue),10%,50%)); } .col--dark .switch__surface { background-color: hsl(var(--hue),10%,22%); } .col--dark .switch__surface-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0)); } .col--dark .switch__input { background-color: hsl(var(--hue),10%,20%); } .col--dark .switch__inner { background-color: hsl(var(--hue),10%,22%); } .col--dark .switch__inner-glare { background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,45%,1),hsla(var(--hue),10%,45%,0)); } .col--dark .switch__rocker-shadow { box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.5); } .col--dark .switch__rocker-sides { background-color: hsl(var(--hue),10%,20%); } .col--dark .switch__rocker-sides-glare { background-image: linear-gradient(90deg,hsla(var(--hue),10%,35%,0),hsla(var(--hue),10%,35%,1),hsla(var(--hue),10%,35%,0)); } .col--dark .switch__rocker { background-color: hsl(var(--hue),10%,20%); } .col--dark .switch__rocker-glare { background-image: linear-gradient(120deg,hsla(var(--hue),10%,25%,0) 25%,hsla(var(--hue),10%,25%,1) 50%,hsla(var(--hue),10%,25%,0) 75%); } .col--dark .switch__light { background-image: linear-gradient(-45deg,hsl(var(--hue),10%,30%) 30%,hsl(var(--hue),10%,50%)); } /* Add vertical orientation styles */ .switch--vertical { transform: rotate(90deg); } /* “On” state */ .switch__input:checked ~ .switch__surface .switch__surface-glare { transform: translate(3em,0.125em); } .switch__input:checked ~ .switch__inner { transform: translate(-0.125em,0); } .switch__input:checked ~ .switch__inner .switch__inner-glare { transform: translate(0,-0.5em); } .switch__input:checked ~ .switch__rocker { transform: rotateY(20deg) translateZ(0.5em); } .switch__input:checked ~ .switch__rocker .switch__rocker-glare { transform: translateX(33%); } .switch__input:checked ~ .switch__rocker-sides { transform: rotateY(20deg) translateZ(0.5em); } .switch__input:checked ~ .switch__rocker-sides .switch__rocker-sides-glare { transform: translateX(-50%); } .switch__input:checked ~ .switch__light { transform: translate(-50%,-50%) rotateY(20deg) translateX(1.125em) translateZ(0.51em); } .switch__input:checked ~ .switch__light .switch__light-inner { opacity: 1; } [V0_FILE]typescriptreact:file="components/shared/solution-hero-background.tsx" isEdit="true" "use client" import LightRays from "../light-rays" import type { MotionValue } from "framer-motion" export function BackgroundEffects({ dynamicOrigin, isLightOn }: { dynamicOrigin: { x: MotionValue; y: MotionValue }, isLightOn: boolean }) { return ( <>

) } [V0_FILE]png:file="public/lumi2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/luzdeteto2-G70faRIGyNIjVh3E40AFi9diLqn6H3.png" isMoved="true" [V0_FILE]xml:file="public/focalamp.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/focalamp-4y4NX4MIyYCoS40jYfX2LNZodBcQzA.svg" isDeleted="true" [V0_FILE]png:file="public/lumi.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/luzdeteto-a3V79bBKIQQDF54o0NERVkwkNvWVKc.png" isMoved="true" isDeleted="true" [V0_FILE]xml:file="components/focalamp.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/focalamp-kMNTizTh5RzZQaCBGHvMF76Bb8MLua.svg" isDeleted="true"

About

Tags

Share

About

Tags

Share

More from tulioportela

More Templates Like This