[V0_FILE]typescriptreact:file="components/polaroid-frame.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import Image from "next/image" interface PolaroidFrameProps { src: string alt: string className?: string } export default function PolaroidFrame({ src, alt, className = "" }: PolaroidFrameProps) { // Use placeholder images for demo, in production you'd use actual Unsplash images const imageSrc = src.startsWith("/") ? `https://source.unsplash.com/random/300x300/?${alt.toLowerCase()}` : src return (

) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); font-family: Arial, Helvetica, sans-serif; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, 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)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/text-animation.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import PolaroidFrame from "./polaroid-frame" const animations = [ { id: 1, content: [ { type: "text", value: "Have you seen this " }, { type: "image", value: "✨", alt: "Sparkle", className: "mx-1 inline-block animate-pulse" }, { type: "text", value: "new web design" }, { type: "break" }, { type: "text", value: "trend of" }, { type: "break" }, { type: "text", value: "putting " }, { type: "image", value: "🔥", alt: "Fire", className: "mx-1 inline-block" }, { type: "text", value: "elements" }, { type: "break" }, { type: "text", value: "in your text?" }, ], }, { id: 2, content: [ { type: "text", value: "Helping brands like" }, { type: "image", value: "🎬", alt: "Netflix", className: "mx-2 inline-block" }, { type: "text", value: "Netflix," }, { type: "break" }, { type: "image", value: "🎵", alt: "Spotify", className: "mx-2 inline-block" }, { type: "text", value: "Spotify," }, { type: "image", value: "🖼️", alt: "Framer", className: "mx-2 inline-block" }, { type: "text", value: "Framer, and" }, { type: "break" }, { type: "text", value: "many others." }, ], }, { id: 3, content: [ { type: "text", value: "Travel" }, { type: "polaroid", value: "https://images.unsplash.com/photo-1565026057447-bc90a3dceb87?q=80&w=300&auto=format", alt: "Luggage", className: "mx-2 inline-block", }, { type: "text", value: "to your fav" }, { type: "break" }, { type: "text", value: "places, this" }, { type: "polaroid", value: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=300&auto=format", alt: "Beach", className: "mx-2 inline-block", }, { type: "text", value: "summer," }, { type: "break" }, { type: "text", value: "book your" }, { type: "image", value: "✈️", alt: "Airplane", className: "mx-2 inline-block" }, { type: "text", value: "trip now!" }, ], }, ] export default function TextAnimation() { const [currentAnimation, setCurrentAnimation] = useState(0) useEffect(() => { const interval = setInterval(() => { setCurrentAnimation((prev) => (prev + 1) % animations.length) }, 3000) return () => clearInterval(interval) }, []) const renderContent = (content: any[]) => { return content.map((item, index) => { if (item.type === "text") { return {item.value} } else if (item.type === "image") { return ( {item.value} ) } else if (item.type === "polaroid") { return } else if (item.type === "break") { return
} return null }) } return (

{renderContent(animations[currentAnimation].content)}

@internet.university

you can finally pull off this new web design trend in @framer!

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import Header from "@/components/header" import HeroSection from "@/components/hero-section" import FeaturesSection from "@/components/features-section" import HowItWorksSection from "@/components/how-it-works-section" import TestimonialsSection from "@/components/testimonials-section" import CtaSection from "@/components/cta-section" import Footer from "@/components/footer" import FloatingEmojis from "@/components/floating-emojis" export default function Home() { return ( <>

{steps[activeStep].title}

{step.title}

About

Tags

Share

More from papingothegamer

More Templates Like This

About

Tags

Share

About

Tags

Share

More from papingothegamer

More Templates Like This