NavoCode Magic Lab — 30 Reel-Ready Next.js Experiments
A dark, premium collection of 30 tiny interactive frontend experiments designed for short NavoCode Instagram reels and GitHub source-code drops.
Run locally
npm install
npm run dev
Open http://localhost:3000.
New: 20 SaaS components
The original 30 experiments are preserved. The homepage now also includes a searchable SaaS collection (components 31–50), inspired by the navy, purple and cyan reference design.
Open http://localhost:3000/#saas-components, or go directly to /saas/reset-password.
| Area | Components |
|---|
| Authentication | Login, Sign Up, Forgot Password, Reset Password, Verification Code |
| Navigation | Sidebar, App Header, Footer, Command Menu |
| Workspace | Dashboard, Team Members, Notification Center, Account Settings, File Upload, Integrations, Activity Feed, Onboarding |
| Billing | Pricing Plans, Billing & Invoices, Usage & Limits |
Each component has its own file in components/saas/, route at /saas/[slug], and interactive preview with actual source code, copy controls, reset and motion controls. Shared primitives are in components/saas/UI.js, collection metadata in lib/saas.js, and scoped styles in app/saas.css. Keep these dependencies together when reusing a component. Navigation uses Next.js links.
The preview stage fits the available screen height and automatically resizes its card when content changes. On narrow screens, use Code only to open the source panel. Play magic replays the entrance effects; in all five authentication demos it also types sample inputs and shows the success animation. Cinema mode hides the outer navigation for recording; press Escape to leave. The effects in app/saas-motion.css include travelling border light, cursor glow/tilt, aurora, particles, meteor trails, orbiting lights, gradient buttons and success particles. These are original React/CSS effects inspired by Magic UI Border Beam, Meteors and Magic Card; the Magic UI package is not required.
Animations use React and CSS, with reduced-motion support and no additional dependencies. Forms, uploads, integrations, account changes and billing are frontend demonstrations using local state; they do not authenticate users, send email, upload to a server, connect accounts or collect payments. Refreshing or resetting a demo clears its state. The verification demo accepts 204816.
To validate a production build without sharing the development server’s output directory (PowerShell):
$env:NAVOCODE_BUILD_DIR = '.next-verify'
npm run build
Original stack
- Next.js 15
- React 19
- Pure CSS animations and transforms
- No UI or animation library
- App Router with one route per magic experiment
The 30 experiments
- Runaway Login — wrong password makes the submit button escape
- Pull-Cord Lamp — pull a physical cord to relight the page
- Magnetic CTA — cursor-attracted button physics
- Hologram Card — 3D tilt, glare and depth
- Cursor Portal — cursor-following dimensional portal
- Neon Vault — cinematic PIN unlock (
2048)
- Liquid Toggle — whole-scene ocean/lava morph
- Glitch Terminal — secret commands:
magic, ship, reel
- Gravity Playground — chips run away from the cursor
- Magic Search — reactive search results and ambience
- Password Monster — creature watches and judges password strength
- Hold To Launch — hold button charges and launches a rocket
- X-Ray Cursor — reveal a hidden cyber website under a boring one
- 404 Black Hole — feed page elements into a black hole
- Exploding Menu — hamburger explodes into radial navigation
- Time Machine Slider — drag from morning to sunset to midnight
- Burn To Reveal — cursor burns a poster layer away
- Self-Destruct UI — forbidden button, alarm, countdown, explosion
- CAPTCHA Boss Fight — catch and hit the captcha three times
- Overdramatic Checkbox — tiny check triggers huge celebration
- Swipe Card Stack — physically throw cards off-screen
- Jelly Navbar — elastic goo highlight follows navigation
- Notification Rain — deploy button makes success toasts rain down
- Teleport Button — clicked CTA collapses and respawns elsewhere
- Text Decoder — typed text scrambles and decodes cinematically
- Slide To Unlock — physical drag-to-unlock interface
- Cursor Snake — elastic neon creature follows the pointer
- Peel The Sticker — peel a cover to reveal source code card
- Mischief Toggle — toggle switches itself off until the third try
- Neon Keyboard — A S D F J K L become reactive light pads
Project structure
app/
page.js # Gallery of all 30 experiments
globals.css # All visual systems and animation
magic/[slug]/page.js # Dynamic experiment route
components/
MagicExperience.js # Interactive React experiments
lib/
magic.js # Titles, descriptions and route metadata
REEL_IDEAS.md # Recording hooks for all 30
GitHub / reel workflow
Record the interaction in a clean browser window, keep each clip focused on one trick, then link the repo in your bio/caption. Each experiment has its own URL such as /magic/black-hole-404, making it easy to record separately.
For the first reels, the strongest visual hooks are black-hole-404, captcha-boss, hold-to-launch, xray-spotlight, self-destruct, peel-sticker, and mischief-toggle.
Notes
This project intentionally uses no animation package so the source is easy for followers to study. The visual logic lives mainly in React state/pointer events plus CSS transforms, masks, gradients and keyframes.
navocode-magic-lap
