Elume is a sophisticated, scroll-driven skincare landing page built with Next.js 15 and Framer Motion. Featuring modern aesthetics, liquid morphing effects, and immersive animations, it's designed to showcase premium beauty brands with unparalleled elegance.
🔗 View Live Demo (Coming Soon)
Experience the future of skincare with bold visuals and smooth animations
- Split Hero Layout with bold product imagery
- Liquid Morphing Effects and glassmorphism design
- Iridescent Text with dynamic gradient animations
- 3D Transform Effects and magnetic field interactions
- Floating Particles and quantum flicker animations
- Smooth Scroll Animations powered by Framer Motion
- Responsive Mobile-First design
- Interactive Elements with hover states and micro-interactions
- Optimized Performance with Next.js 15 App Router
- Hero Section with compelling tagline and dual CTAs
- Before & After Comparison with customer testimonials
- Social Proof Stats (50K+ customers, 5⭐ rating)
- Product Showcase with animated cards
- Customer Testimonials with staggered reveal animations
- Premium Footer with brand links
- Framework: Next.js 15 (App Router)
- Styling: TailwindCSS + Custom CSS animations
- Animations: Framer Motion
- Typography: Playfair Display + Inter fonts
- Icons: Lucide React
- Language: TypeScript
- Package Manager: npm/yarn/pnpm
elume/
├── public/
│ ├── images/
│ │ ├── elume-hero.png # Main hero image
│ │ ├── before-skin.png # Before comparison
│ │ └── after-skin.png # After comparison
│ └── *.svg # Next.js default icons
├── src/
│ ├── app/
│ │ ├── globals.css # Global styles & animations
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Main landing page
│ ├── components/
│ │ └── effects.tsx # Reusable animation components
│ └── lib/
│ └── utils.ts # Utility functions
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── README.md
- Node.js 18+
- npm, yarn, or pnpm
- Clone the repository
git clone https://github.com/Sam-May-Futurelab/elume.git
cd elume- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev- Open your browser Navigate to http://localhost:3000
Edit the color palette in src/app/globals.css:
:root {
--background: #FAF9F6; /* Pearl */
--gold: #E4CFA4; /* Gold accent */
--lilac: #DAD7F0; /* Lilac accent */
--charcoal: #2E2E2E; /* Primary text */
}Update text content in src/app/page.tsx:
- Hero headlines and taglines
- Product descriptions
- Customer testimonials
- Call-to-action buttons
Replace images in public/images/:
elume-hero.png- Main hero image (1536x1024 recommended)before-skin.png/after-skin.png- Comparison images
Customize animations in src/components/effects.tsx:
- Particle systems
- Liquid morphing effects
- Text reveal animations
- Magnetic interactions
- TextReveal: 3D word-by-word text animations
- LiquidCard: Morphing container effects
- MagneticElement: Mouse-following magnetic interactions
- FloatingParticles: Dynamic particle system
- ShimmerCard: Subtle shimmer overlay effects
- Holographic: Multi-layer gradient animations
npm install -g vercel
vercelnpm run build
# Upload the 'out' folder to Netlifynpm run build
npm start- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Framer Motion for incredible animation capabilities
- TailwindCSS for utility-first styling
- Next.js for the powerful React framework
- Lucide for beautiful iconography
Sam May - @Sam-May-Futurelab
Project Link: https://github.com/Sam-May-Futurelab/elume
Built with ❤️ for the beauty industry