@tailwind base; @tailwind components; @tailwind utilities; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @layer base { :root { --background: 0 0% 99%; --foreground: 0 0% 8%; --card: 0 0% 100%; --card-foreground: 0 0% 8%; --popover: 0 0% 100%; --popover-foreground: 0 0% 8%; --primary: 0 0% 8%; --primary-foreground: 0 0% 98%; --secondary: 220 14% 96%; --secondary-foreground: 0 0% 8%; --muted: 220 14% 96%; --muted-foreground: 220 9% 46%; --accent: 220 70% 55%; --accent-foreground: 0 0% 100%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 220 13% 91%; --input: 220 13% 91%; --ring: 220 70% 55%; --radius: 1rem; --gradient-primary: linear-gradient(135deg, hsl(220 70% 55%) 0%, hsl(280 70% 60%) 100%); --gradient-subtle: linear-gradient(135deg, hsl(220 20% 97%) 0%, hsl(280 20% 97%) 50%, hsl(40 30% 97%) 100%); --gradient-glass: linear-gradient(135deg, hsla(0 0% 100% / 0.8) 0%, hsla(0 0% 100% / 0.4) 100%); --shadow-sm: 0 1px 2px 0 hsla(0 0% 0% / 0.03); --shadow-md: 0 4px 6px -1px hsla(0 0% 0% / 0.05), 0 2px 4px -2px hsla(0 0% 0% / 0.05); --shadow-lg: 0 10px 15px -3px hsla(0 0% 0% / 0.05), 0 4px 6px -4px hsla(0 0% 0% / 0.05); --shadow-xl: 0 20px 25px -5px hsla(0 0% 0% / 0.05), 0 8px 10px -6px hsla(0 0% 0% / 0.05); --shadow-glass: 0 8px 32px 0 hsla(220 70% 55% / 0.08); --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%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 212.7 26.8% 83.9%; --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 base { * { @apply border-border; } html { scroll-behavior: smooth; } body { @apply bg-background text-foreground font-sans antialiased; font-family: 'Inter', system-ui, sans-serif; } } @layer components { .glass-card { @apply bg-white/60 backdrop-blur-xl border border-white/40 rounded-2xl; box-shadow: var(--shadow-glass); } .glass-card-strong { @apply bg-white/80 backdrop-blur-2xl border border-white/50 rounded-2xl; box-shadow: var(--shadow-glass); } .gradient-text { @apply bg-clip-text text-transparent; background-image: var(--gradient-primary); } .gradient-bg { background: var(--gradient-subtle); } .hover-lift { @apply transition-all duration-300 ease-out; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .section-padding { @apply py-24 md:py-32 px-6 md:px-12 lg:px-24; } .text-balance { text-wrap: balance; } } @layer utilities { .animate-fade-up { animation: fadeUp 0.8s ease-out forwards; } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; } .animate-scale-in { animation: scaleIn 0.5s ease-out forwards; } .animation-delay-100 { animation-delay: 100ms; } .animation-delay-200 { animation-delay: 200ms; } .animation-delay-300 { animation-delay: 300ms; } .animation-delay-400 { animation-delay: 400ms; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 6s ease-in-out infinite; } import type { Config } from "tailwindcss"; export default { darkMode: ["class"], content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px" } }, extend: { fontFamily: { sans: ['Inter', '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))" }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, 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" } }, "fade-up": { "0%": { opacity: "0", transform: "translateY(30px)" }, "100%": { opacity: "1", transform: "translateY(0)" } }, "fade-in": { "0%": { opacity: "0" }, "100%": { opacity: "1" } }, "scale-in": { "0%": { opacity: "0", transform: "scale(0.95)" }, "100%": { opacity: "1", transform: "scale(1)" } }, shimmer: { "0%": { backgroundPosition: "-200% 0" }, "100%": { backgroundPosition: "200% 0" } }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-up": "fade-up 0.8s ease-out forwards", "fade-in": "fade-in 0.6s ease-out forwards", "scale-in": "scale-in 0.5s ease-out forwards", shimmer: "shimmer 2s linear infinite", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config;

Elevate  your Product & Brand
With CGI

We turn your product in - 3D visuals
that grab attention, increase sales, and elevate your brand.
Delivered in just 7 days or less.

What services are you providing?
we cover everthing from:  Product Rendering, Product Animation, Commercial/Short Ads , Visual Branding, Product teaser / launch, Content for Social, Packshot & Mockup for E-commerce, Web Assets,  360° Product Viewer, Packaging Design.We  include the copy for the Call to action inside the Commercial/Short Ads
Do you also refine branding and logos?
For an extra cost you can get a full refined branding done tailored to your business. All the designs would be done according to the brand guidelines keeping everything on-brand.
How fast can I recieve my renders?
we are able to complete 90% of tasks under 1-3 business days, however more complex requests can take  7 days
Do you offer refunds?
Due to the upfront investments of our time, planning, and costs, we can not offer refunds. But unlimited revisions until you’re 100% satisfied!
How many assets do I get each month?
It depends on how many requests you create and how big they are! We share new work every 48-72 hours, so we move through requests pretty quickly. If you keep your backlog updated and give feedback quickly, we should be able to get a lot done each month.
ChosenOneStudio©2025
News Letter
TermsPolicy
import { Toaster } from "@/components/ui/toaster"; import { Toaster as Sonner } from "@/components/ui/sonner"; import { TooltipProvider } from "@/components/ui/tooltip"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Index from "./pages/Index"; import NotFound from "./pages/NotFound"; const queryClient = new QueryClient(); const App = () => ( } /> } /> ); export default App; import Navbar from "@/components/Navbar"; import Hero from "@/components/Hero"; import RecentWork from "@/components/RecentWork"; import Testimonials from "@/components/Testimonials"; import Process from "@/components/Process"; import Pricing from "@/components/Pricing"; import FAQ from "@/components/FAQ"; import Footer from "@/components/Footer"; const Index = () => { return (
); }; export default Index; import { motion } from "framer-motion"; const Navbar = () => { return (
CGIstudio
Work Process Pricing FAQ
Book a Call
); }; export default Navbar; import { motion } from "framer-motion"; import { ArrowRight, Play } from "lucide-react"; const Hero = () => { return (
Available for new projects Elevate Your Product
With CGI
We turn your product into 3D visuals that grab attention, increase sales, and elevate your brand. Delivered in just 7 days or less. Book a Call View Our Work
); }; export default Hero; import { motion, useInView } from "framer-motion"; import { useRef } from "react"; const projects = [ { video: "/videos/project-1.mp4", title: "Product Visualization", category: "3D Animation" }, { video: "/videos/project-2.mp4", title: "Brand Commercial", category: "CGI Production" }, { video: "/videos/project-3.mp4", title: "Motion Design", category: "3D Rendering" }, ]; const ProjectCard = ({ project, index }: { project: typeof projects[0]; index: number }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); return (

{project.category}

{project.title}

); }; const RecentWork = () => { const headerRef = useRef(null); const isHeaderInView = useInView(headerRef, { once: true }); return (
Recent Work

Our Latest Projects

{projects.map((project, index) => )}
); }; export default RecentWork; import { motion, useInView } from "framer-motion"; import { useRef } from "react"; import { Quote } from "lucide-react"; import blankedLogo from "@/assets/blanked-logo.png"; import elleLogo from "@/assets/elle-studio-logo.png"; import etherealLogo from "@/assets/ethereal-candle-logo.png"; const testimonials = [ { quote: "The CGI work exceeded our expectations. Our product shots now look incredibly premium and have significantly increased our conversion rates.", name: "Brandon Wang", role: "Founder", company: "Blanked Studio", logo: blankedLogo }, { quote: "Working with CGI Studio was seamless. They understood our vision perfectly and delivered stunning 3D visuals that elevated our entire brand identity.", name: "Luca Liguori", role: "Creative Director", company: "Elle Studio", logo: elleLogo }, { quote: "The attention to detail in our candle renders was phenomenal. Every texture, every light reflection was perfect. Truly exceptional work.", name: "Will", role: "Founder", company: "Ethereal Candle", logo: etherealLogo }, ]; const TestimonialCard = ({ testimonial, index }: { testimonial: typeof testimonials[0]; index: number }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); return (

"{testimonial.quote}"

{testimonial.company}

{testimonial.name}

{testimonial.role} at {testimonial.company}

); }; const Testimonials = () => { const headerRef = useRef(null); const isHeaderInView = useInView(headerRef, { once: true }); return (
Testimonials

What Our Clients Think

{testimonials.map((testimonial, index) => )}
); }; export default Testimonials; import { motion, useInView } from "framer-motion"; import { useRef } from "react"; import { MessageSquare, Palette, Box, Sparkles } from "lucide-react"; const steps = [ { icon: MessageSquare, number: "01", title: "Discovery Call", description: "We discuss your vision, goals, and requirements to understand exactly what you need.", duration: "Day 1" }, { icon: Palette, number: "02", title: "Concept & Design", description: "Our team creates mood boards and initial concepts for your approval.", duration: "Day 2-3" }, { icon: Box, number: "03", title: "3D Production", description: "We build detailed 3D models and create stunning photorealistic renders.", duration: "Day 4-6" }, { icon: Sparkles, number: "04", title: "Final Delivery", description: "Polished visuals delivered in all formats you need, ready for use.", duration: "Day 7" }, ]; const ProcessStep = ({ step, index }: { step: typeof steps[0]; index: number }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); const Icon = step.icon; return (
{step.number} {step.duration}

{step.title}

{step.description}

{index < steps.length - 1 &&
} ); }; const Process = () => { const headerRef = useRef(null); const isHeaderInView = useInView(headerRef, { once: true }); return (
How We Work

Our Process

From concept to delivery in just 7 days. Here's how we bring your vision to life.

{steps.map((step, index) => )}
); }; export default Process; import { motion, useInView } from "framer-motion"; import { useRef } from "react"; import { Check, ArrowRight } from "lucide-react"; const plans = [ { name: "Starter", price: "$1,500", description: "Perfect for single product visuals", features: ["1 Product Render", "3 Angles/Variations", "High-resolution output", "7-day delivery", "1 revision round"], highlighted: false }, { name: "Professional", price: "$3,500", description: "Most popular for brand launches", features: ["3 Product Renders", "6 Angles/Variations each", "High-resolution + 4K", "5-day delivery", "3 revision rounds", "Animation loop included"], highlighted: true }, { name: "Enterprise", price: "Custom", description: "Full-scale CGI production", features: ["Unlimited renders", "Full 360° views", "8K resolution", "Priority delivery", "Unlimited revisions", "Full animation package", "Dedicated support"], highlighted: false }, ]; const PricingCard = ({ plan, index }: { plan: typeof plans[0]; index: number }) => { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); return ( {plan.highlighted &&
Most Popular
}

{plan.name}

{plan.description}

{plan.price} {plan.price !== "Custom" && / project}
    {plan.features.map((feature, i) => (
  • {feature}
  • ))}
Get Started
); }; const Pricing = () => { const headerRef = useRef(null); const isHeaderInView = useInView(headerRef, { once: true }); return (
Pricing

Simple, Transparent Pricing

Choose the plan that fits your needs. All plans include our 7-day delivery guarantee.

{plans.map((plan, index) => )}
); }; export default Pricing; import { motion, useInView } from "framer-motion"; import { useRef } from "react"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; const faqs = [ { question: "What is CGI and how can it help my brand?", answer: "CGI (Computer Generated Imagery) creates photorealistic 3D visuals of your products without expensive photo shoots. It offers unlimited creative possibilities, perfect lighting, and consistent quality across all your marketing materials." }, { question: "How long does a typical project take?", answer: "Most projects are completed within 7 days or less. For larger or more complex projects, we'll provide a custom timeline during our discovery call. We prioritize quality while maintaining fast turnaround times." }, { question: "What do I need to provide to get started?", answer: "We typically need reference photos of your product from multiple angles, brand guidelines (if available), and any specific creative direction you have in mind. Don't worry if you don't have everything – we'll guide you through the process." }, { question: "Can I request revisions?", answer: "Absolutely! Each plan includes revision rounds. We work closely with you to ensure the final result exceeds your expectations. Additional revisions beyond your plan's allocation are available at a reasonable rate." }, { question: "What file formats do you deliver?", answer: "We deliver in all major formats including PNG, JPEG, TIFF for images, and MP4, MOV for animations. 4K and 8K resolutions are available depending on your plan. We can also provide custom formats upon request." }, { question: "Do you offer ongoing partnerships?", answer: "Yes! Many of our clients work with us on a retainer basis for consistent content creation. Our Enterprise plan is designed for brands that need regular CGI content. Contact us to discuss a custom arrangement." }, ]; const FAQ = () => { const headerRef = useRef(null); const contentRef = useRef(null); const isHeaderInView = useInView(headerRef, { once: true }); const isContentInView = useInView(contentRef, { once: true, margin: "-50px" }); return (
FAQ

Frequently Asked Questions

Everything you need to know about our CGI services.

{faqs.map((faq, index) => ( {faq.question} {faq.answer} ))}
); }; export default FAQ; import { motion, useInView } from "framer-motion"; import { useRef } from "react"; import { ArrowRight, Mail, MapPin } from "lucide-react"; const Footer = () => { const ctaRef = useRef(null); const isCtaInView = useInView(ctaRef, { once: true }); return ( ); }; export default Footer;