Inspiration : We were inspired by the design elegance of Apple and the storytelling power of cinematic websites. The goal was to create a production-ready studio site that feels premium, interactive, and unforgettable something that leaves an impression from the first scroll.
What it does : AVANT STUDIO is a full creative software agency site that showcases services, past projects, client trust, and contact info all wrapped in a modern dark theme, smooth animations, and interactive design. It reflects what top-tier digital craftsmanship feels like.
How we built it We used React + TypeScript with Vite for blazing-fast performance, Tailwind CSS for consistent styling, and integrated Framer Motion, GSAP ScrollTrigger, SplitType, and Lenis for scroll animations, micro-interactions, and text reveals. The UI features glassmorphism cards, custom cursors, magnetic elements, and animated project modals. All built with scalable architecture and smooth UX in mind.
Challenges we ran into Balancing heavy animations with performance was tricky optimizing scroll performance and GPU rendering took iteration. Creating a truly smooth magnetic cursor + hover experience also involved tuning mouse event calculations precisely.
Accomplishments that we're proud of : We managed to create a site that doesn’t just look premium but feels premium buttery smooth scroll, cinematic animations, glass UI, and a responsive experience that works across devices. We brought together high fidelity UI with real code performance. and that is in the one shot only.
What we learned : Deepened understanding of animation performance trade-offs, learned how to manage smooth scrolling libraries like Lenis alongside GSAP timelines, and gained hands-on mastery of building creative agency-level experiences using modern React and Tailwind architecture. and how we can give best prompt for the best result.
Built With
- framer-motion
- google-font
- gsap
- react
- typescript
- vite
Log in or sign up for Devpost to join the conversation.