OriginStamp - 3D Landing Page

A premium 3D landing page for OriginStamp, inspired by igloo.inc's technical excellence, showcasing ZK-powered data authenticity.

🎨 Design Features

• WebGL/Three.js - Full 3D scene with custom shaders and effects
• Smooth Scroll Animations - Parallax effects tied to scroll position
• Interactive 3D Objects - Verification blocks, stamp metaphor, particle systems
• Post-Processing Effects - Bloom, chromatic aberration for premium feel
• Responsive Design - Optimized for desktop and mobile devices

🚀 Tech Stack

• React 18 - UI framework
• Three.js - 3D rendering engine
• @react-three/fiber - React renderer for Three.js
• @react-three/drei - Useful helpers for R3F
• @react-three/postprocessing - Post-processing effects
• Vite - Fast development and build tool
• TailwindCSS - Utility-first CSS framework
• Framer Motion - Animation library

🎯 Concept

The landing page uses a verification blocks metaphor to represent the blockchain/ZK verification process:

• Circular arrangement of glass blocks (representing data nodes)
• Central stamp object (the verification seal)
• Particle field (data streams)
• Smooth scroll interactions revealing content sections

📦 Installation

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

🎭 Visual Metaphor

We use:

• Verification Blocks - Glass-like cubes with transmission material
• Stamp Object - Central 3D stamp that "authenticates" data
• Connection Lines - Visual links between verification nodes
• Particle Field - Representing high-volume data streams
• Color Scheme - Cyan/blue and purple gradient (trust and technology)

🏗️ Project Structure

src/
├── components/
│   ├── Scene.jsx              # Main 3D scene orchestrator
│   ├── VerificationBlocks.jsx # Circular blockchain nodes
│   ├── StampObject.jsx        # Central verification stamp
│   ├── ParticleField.jsx      # Background particle system
│   ├── Navbar.jsx             # Top navigation
│   ├── Loader.jsx             # Loading screen
│   └── Overlay.jsx            # HTML content overlay
├── App.jsx                    # Main app component
├── main.jsx                   # Entry point
└── index.css                  # Global styles

🎨 Key Features

3D Scene

• Real-time WebGL rendering with Three.js
• Custom geometry and materials
• Smooth scroll-based animations
• Post-processing effects (bloom, chromatic aberration)

Content Sections

1. Hero - Main value proposition with stats
2. Features - 6 key features with icons
3. Technology - Technical architecture and stack
4. Use Cases - 4 target customer segments
5. Footer - Links and information

🎯 Performance Optimizations

• Efficient buffer geometry for particles
• Instanced rendering where possible
• Optimized post-processing
• Responsive DPR (device pixel ratio)
• Code splitting with Vite

🌐 Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers with WebGL support

📝 Customization

Edit the following files to customize:

• src/components/Overlay.jsx - Content and copy
• tailwind.config.js - Colors and theme
• src/components/Scene.jsx - 3D scene configuration
• src/components/VerificationBlocks.jsx - Block count and layout

📄 License

MIT License - feel free to use this as a template for your own projects!