StudioSize

Modern, responsive clone of the StudioSize design agency website with enhanced features. Showcases a portfolio of creative work with smooth animations, interactive elements, and optimized performance. Built with Next.js, TypeScript, and Tailwind CSS.

Generate Convert Improve

Install / Use

/learn @ratanz/StudioSize

About this skill

Quality Score

0/100

README

StudioSize

An enhanced clone of StudioSize, a design studio specializing in strategy, packaging, motion, naming, and branding solutions. This project recreates the studio's elegant website with modern web technologies while adding performance improvements and responsive optimizations.

Features

Smooth Animations: Implemented using GSAP and Framer Motion for fluid transitions and interactions
Interactive Portfolio: Hover-triggered video previews of featured work
Custom Cursor Effects: Context-aware cursor that changes based on user interactions
Responsive Design: Fully optimized for all device sizes
Performance Optimized: Fast loading times with optimized assets

Tech Stack

Next.js 14
React 18
TypeScript
Tailwind CSS
GSAP for animations
Framer Motion
Swiper for carousels

Getting Started

Clone the repository
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```
Open http://localhost:3000 in your browser

Project Structure

/app: Next.js app directory with routes and global components
/components: Reusable UI components
/public: Static assets including images and videos

Acknowledgement

This is a clone of StudioSize created for educational purposes. All design credit goes to the original creators.

Related Skills

clearshot

Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.

openpencil

2.1k

The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.

ui-ux-pro-max-skill

60.4k

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

ui-ux-pro-max-skill

60.4k

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms