[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import TextRevealDemo from "@/components/text-reveal-demo" export default function Home() { return } [V0_FILE]xml:file="public/logo-dark.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rantir%202025%20-%20Logo%20Mark-footer-syKFVsmC1ZfmruMbLM7dBbl0ex0KVe.svg" isMerged="true" [V0_FILE]xml:file="public/logo-light.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Rantir%202025%20-%20Logo%20Mark-footer%20white-GX9fL0SoTftdkew3AFl4ozAcsNF0Im.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/logo.tsx" isEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" export function Logo() { return (

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Instrument_Sans } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import "./globals.css" const instrumentSans = Instrument_Sans({ subsets: ["latin"], display: "swap", variable: "--font-instrument-sans", }) export const metadata: Metadata = { title: "Rantir - Text Effects", description: "Showcase of beautiful text effects for Rantir", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["var(--font-instrument-sans)"], }, 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="components/text-reveal-demo.tsx" isEdit="true" isMerged="true" import { TextReveal } from "@/components/rantir_text/text-reveal" import { Navigation } from "@/components/navigation" export default function TextRevealDemo() { return (

Rantir is the new way to create beautiful websites and products

) } [V0_FILE]typescriptreact:file="app/gradient/page.tsx" isEdit="true" isMerged="true" import { GradientText } from "@/components/rantir_text/gradient-text" import { Navigation } from "@/components/navigation" export default function GradientPage() { return (

Rantir is the new way to create beautiful websites and products

) } [V0_FILE]typescriptreact:file="app/animated-gradient/page.tsx" isEdit="true" isMerged="true" import { AnimatedGradientText } from "@/components/rantir_text/animated-gradient-text" import { Navigation } from "@/components/navigation" export default function AnimatedGradientPage() { return (

Rantir is the new way to create beautiful websites and products

) } [V0_FILE]typescriptreact:file="app/typing/page.tsx" isEdit="true" isMerged="true" import { TypingText } from "@/components/rantir_text/typing-text" import { Navigation } from "@/components/navigation" export default function TypingPage() { return (

Rantir is the new way to create beautiful websites and products

) } [V0_FILE]typescriptreact:file="app/text-animate/page.tsx" isEdit="true" isMerged="true" import { TextAnimate } from "@/components/rantir_text/text-animate" import { Navigation } from "@/components/navigation" export default function TextAnimatePage() { return (

Rantir is the new way to create beautiful websites and products

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isEdit="true" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" export function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) // Avoid hydration mismatch by only rendering after mount useEffect(() => { setMounted(true) }, []) const isDark = mounted && theme === "dark" return ( ) } [V0_FILE]typescriptreact:file="components/rantir_text/gradient-text.tsx" isEdit="true" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" interface GradientTextProps { children: React.ReactNode className?: string } export function GradientText({ children, className }: GradientTextProps) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/rantir_text/typing-text.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" interface TypingTextProps { children: string className?: string typingSpeed?: number } export function TypingText({ children, className, typingSpeed = 50 }: TypingTextProps) { const [displayedText, setDisplayedText] = useState("") const [currentIndex, setCurrentIndex] = useState(0) const text = typeof children === "string" ? children : "" useEffect(() => { if (currentIndex < text.length) { const timeout = setTimeout(() => { setDisplayedText((prev) => prev + text[currentIndex]) setCurrentIndex((prev) => prev + 1) }, typingSpeed) return () => clearTimeout(timeout) } }, [currentIndex, text, typingSpeed]) return (

{displayedText}

) } [V0_FILE]typescriptreact:file="components/rantir_text/text-animate.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "motion/react" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" interface TextAnimateProps { children: string className?: string } export function TextAnimate({ children, className }: TextAnimateProps) { const [words, setWords] = useState([]) useEffect(() => { if (typeof children === "string") { setWords(children.split(" ")) } }, [children]) return (

{words.map((word, i) => ( {word} ))}

) } [V0_FILE]typescriptreact:file="components/rantir_text/text-reveal.tsx" isEdit="true" isMerged="true" "use client" import { motion, type MotionValue, useScroll, useTransform } from "motion/react" import { type ComponentPropsWithoutRef, type FC, type ReactNode, useRef } from "react" import { cn } from "@/lib/utils" export interface TextRevealProps extends ComponentPropsWithoutRef<"div"> { children: string } export const TextReveal: FC = ({ children, className }) => { const targetRef = useRef(null) const { scrollYProgress } = useScroll({ target: targetRef, }) if (typeof children !== "string") { throw new Error("TextReveal: children must be a string") } const words = children.split(" ") return (

{words.map((word, i) => { const start = i / words.length const end = start + 1 / words.length return ( {word} ) })}

) } interface WordProps { children: ReactNode progress: MotionValue range: [number, number] } const Word: FC = ({ children, progress, range }) => { const opacity = useTransform(progress, range, [0, 1]) return ( {children} {children} ) } [V0_FILE]typescriptreact:file="components/navigation.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { Logo } from "@/components/logo" import { ThemeToggle } from "@/components/theme-toggle" const links = [ { href: "/", label: "Text Reveal" }, { href: "/gradient", label: "Gradient Text" }, { href: "/animated-gradient", label: "Animated Gradient" }, { href: "/typing", label: "Typing Text" }, { href: "/text-animate", label: "Text Animate" }, ] export function Navigation() { const pathname = usePathname() return ( ) } [V0_FILE]typescriptreact:file="components/rantir_text/animated-gradient-text.tsx" isEdit="true" "use client" import type React from "react" import { cn } from "@/lib/utils" interface AnimatedGradientTextProps { children: React.ReactNode className?: string } export function AnimatedGradientText({ children, className }: AnimatedGradientTextProps) { return (

{children}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --font-sans: "Instrument Sans", system-ui, sans-serif; } body { @apply bg-white text-slate-900 dark:bg-black dark:text-slate-100; font-feature-settings: "rlig" 1, "calt" 1; } } @layer utilities { .animate-gradient { animation: gradient 8s ease infinite; } .animate-blink { animation: blink 1s step-end infinite; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }