A premium, fully interactive Web3 presentation deck for eonian, showcasing a wallet-native, gamified festival ecosystem.
- 8 Interactive Slides with unique animations and visual effects
- Dark Mode Design with glassmorphism and neon aesthetics
- Kinetic Typography with wave animations and character-by-character reveals
- 3D-like Visual Effects using CSS and Framer Motion
- Particle System with floating ambient particles
- Fully Responsive design that adapts to all screen sizes
- Keyboard Navigation with arrow keys, space, and number shortcuts
- Smooth Transitions between slides with progress tracking
- Background: Absolute Black (#0B0B0F)
- Neon Mint: #2FFFBF
- Ultraviolet Blue: #3700FF
- Magenta Pink: #FF3EC8
- Coral Red: #FF6565
- Deep Lavender: #B486F8
- Soft Gray: #D0D0D0
- Glassmorphism with backdrop blur
- Neon glow effects and text shadows
- Orbiting tokens and particles
- Breathing animations
- Interactive hover states
- Opening Hook - Lightning asteroid, kinetic title, orbiting confetti
- The Problem - Broken ring visual, chain break effects
- The Solution - Festival Engine with orbiting XP tokens
- Technology Stack - Vertical glass discs with privacy rings
- Business Model - Spinning Revenue Machine with team platform
- Roadmap - Vertical neon timeline with completion status
- Market & Edge - Competitor comparison with central callout
- Outro/CTA - Glowing aura with floating confetti
- Node.js 18+
- npm or yarn
-
Clone or download the project files
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:3000
- Arrow Keys (← →) - Navigate between slides
- Spacebar - Go to next slide
- Number Keys (1-8) - Jump directly to specific slides
- Mouse/Touch - Click navigation dots or arrow buttons
- Next.js 14 - React framework
- TypeScript - Type safety
- Framer Motion - Advanced animations
- Tailwind CSS - Utility-first styling
- Lucide React - Icon library
cultty-presentation/
├── app/
│ ├── globals.css # Global styles and animations
│ ├── layout.tsx # Root layout with metadata
│ └── page.tsx # Main presentation component
├── components/
│ ├── slides/ # Individual slide components
│ │ ├── Slide1Opening.tsx
│ │ ├── Slide2Problem.tsx
│ │ ├── Slide3Solution.tsx
│ │ ├── Slide4TechStack.tsx
│ │ ├── Slide5BusinessModel.tsx
│ │ ├── Slide6Roadmap.tsx
│ │ ├── Slide7Market.tsx
│ │ └── Slide8Outro.tsx
│ ├── ui/ # Reusable UI components
│ │ ├── ParticleSystem.tsx
│ │ ├── GlassCard.tsx
│ │ ├── KineticText.tsx
│ │ └── OrbitingTokens.tsx
│ └── PresentationNavigation.tsx
├── tailwind.config.js # Tailwind configuration
├── next.config.js # Next.js configuration
└── package.json # Dependencies and scripts
Creates floating ambient particles with neon colors that continuously animate across the screen.
Animated typography that reveals text character by character with wave effects and interactive hover states.
Reusable glassmorphism container with customizable glow colors and hover animations.
Circular animation system for tokens and badges that orbit around central elements.
- Create a new component in
components/slides/ - Add it to the slides array in
app/page.tsx - Update navigation hints if needed
- Edit transition durations in individual components
- Adjust animation delays for sequence timing
- Customize easing functions in Framer Motion configs
- Update the color palette in
tailwind.config.js - Modify CSS custom properties in
globals.css - Adjust neon glow effects as needed
The presentation automatically adapts to different screen sizes:
- Desktop: Full animations and effects
- Tablet: Optimized spacing and touch controls
- Mobile: Simplified animations for performance
- Optimized animation performance using Framer Motion
- Efficient particle system with canvas rendering
- Responsive images and lazy loading
- Minimal JavaScript bundle size
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
This project is part of the eonian presentation materials.
eonian - The festival economy finally unlocked