10 / 10Free
system
Welcome! I'm ready to build a completely functional React app for you. What do you have in mind?
import React, { useMemo } from "react"; import { motion } from "framer-motion"; import { Zap, Shield, Globe } from "lucide-react"; import "./styles.css"; function ParticleRing() { const particles = useMemo(() => { const items = []; const count = 150; for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2; const radius = 30 + Math.random() * 40; const size = 3 + Math.random() * 8; const hue = 30 + Math.random() * 10; const saturation = 30 + Math.random() * 20; const lightness = 60 + Math.random() * 20; items.push({ cx: 50 + radius * Math.cos(angle), cy: 50 + radius * Math.sin(angle), size, color: `hsl(${hue}, ${saturation}%, ${lightness}%)`, delay: Math.random() * -20, duration: 15 + Math.random() * 10 }); } return items; }, []); return ( <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none flex items-center justify-center opacity-70"> <div className="relative w-[150vw] h-[150vw] sm:w-[100vw] sm:h-[100vw] lg:w-[80vw] lg:h-[80vw] shrink-0"> <motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 120, ease: "linear" }} className="absolute inset-0" > {particles.map((p, i) => ( <motion.div key={i} className="absolute rounded-full shadow-[0_2px_10px_rgba(0,0,0,0.2)]" style={{ left: `${p.cx}%`, top: `${p.cy}%`, width: p.size, height: p.size, backgroundColor: p.color, }} animate={{ y: ["-10px", "10px", "-10px"], scale: [1, 1.2, 1], opacity: [0.6, 1, 0.6] }} transition={{ repeat: Infinity, duration: p.duration, delay: p.delay, ease: "easeInOut" }} /> ))} </motion.div> </div> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vw] sm:w-[50vw] sm:h-[50vw] lg:w-[40vw] lg:h-[40vw] rounded-full bg-[#0A0A0A] blur-3xl z-10" /> </div> ); } export default function App() { return ( <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-white/20 relative overflow-hidden flex flex-col justify-between"> <ParticleRing /> <main className="relative z-10 flex flex-col justify-end p-6 md:p-10 pb-20 md:pb-12 pointer-events-none h-screen"> <div className="flex flex-col md:flex-row items-end justify-between w-full pb-8 md:pb-0 gap-10 md:gap-20"> <motion.h1 initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.4, ease: [0.16, 1, 0.3, 1] }} className="flex-1 text-[12vw] sm:text-[9vw] md:text-[6.5vw] lg:text-[7vw] leading-[0.85] font-bold tracking-tighter uppercase max-w-[80vw] pointer-events-auto mix-blend-difference text-white" > What will we<br /> build<br /> today? </motion.h1> <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 0.8 }} className="flex-none w-full md:w-[320px] lg:w-[400px] text-xs md:text-[10px] lg:text-xs font-medium uppercase tracking-widest leading-loose text-white/50 mix-blend-difference pointer-events-auto" > <p className="text-white/70 mb-6"> Enter a prompt on the left to generate a fully functional, production-ready application in seconds. </p> <div className="flex flex-col gap-3"> <div className="flex items-center gap-3"> <Zap size={14} className="text-[#eab308]" /> <span>Real-time Generation</span> </div> <div className="flex items-center gap-3"> <Shield size={14} className="text-[#3b82f6]" /> <span>Secure Deployment</span> </div> <div className="flex items-center gap-3"> <Globe size={14} className="text-[#a855f7]" /> <span>Global Hosting</span> </div> </div> <div className="mt-8 flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full w-max"> <span className="relative flex h-2 w-2"> <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span> <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span> </span> <span className="text-[10px] font-bold text-white/70 tracking-widest uppercase">System Ready</span> </div> </motion.div> </div> </main> <div className="absolute bottom-6 left-0 right-0 text-center z-10"> <p className="text-white/30 text-[10px] font-medium uppercase tracking-[0.2em]">Powered by Gemini & Chatly AI</p> </div> </div> ); }