Project Gallery

A card perspective effect, hover over the card to elevate card elements.

Preview

Code

Code

app/page.tsx

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Installation

Initialized a project and installed the necessary dependencies to use this component.

1. Initialize a new Next.js project:

Code
npx create-next-app@latest my-app

2. Install and initialize shadcn/ui:

Code
npx shadcn@latest init

3. Install Button component from shadcn:

Code
npx shadcn@latest add button

4. Install Framer Motion for animations:

Code
npm install framer-motion

Copy & Paste Component

Code

components/custom/project-item.tsx

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Add Animations

Code

src/anim/index.ts

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Global Styles

Code

src/app/globals.css

1// This is premium content 2// Upgrade to Pro or Agency plan to access the full code 3// 4// Features included: 5// - Complete implementation 6// - Advanced animations 7// - Performance optimizations 8// - TypeScript support 9// - Responsive design 10// 11// Get access now at /pricing 12 13const PremiumComponent = () => { 14 return ( 15 <div> 16 <h1>Premium Content</h1> 17 <p>Upgrade to unlock this component</p> 18 </div> 19 ); 20}; 21 22export default PremiumComponent;

Become an Astrae
Affiliate Today

Make referrals, and bring in clients. Keep 50% of your earnings paid out weekly.

Description