The Termopus landing page at termopus.com is built with Next.js and features Remotion-powered animations, an interactive security visualization, and integrated Paddle subscription checkout.
| Route | Purpose |
|---|---|
/ |
Homepage — Hero, Features, Security, Architecture, How It Works, FAQ |
/subscribe |
Subscription — Paddle.js inline checkout, monthly/yearly toggle |
/restore |
Device Restore — email verification for transferring subscriptions |
- Animated Remotion logo video (WebM + MP4 fallback)
- Phone mockup with live app screenshot
- Floating animation with scroll indicator
- 6 feature cards with gradient backgrounds and custom icons
- Skew card showcase with parallax hover effects
- Interactive 7-layer security tower visualization
- Each layer expandable with detailed explanation
- Animated data flow diagram
- Phone → Relay → Bridge → Claude Code pipeline
- 3-step onboarding flow
- Install → Scan → Build
- Accordion-style Q&A
- Common questions about security, privacy, compatibility
| Technology | Purpose |
|---|---|
| Next.js 14 | Framework (App Router) |
| Remotion | Video animations (logo, demos) |
| Tailwind CSS | Styling |
| shadcn/ui | UI components |
| Framer Motion | Page transitions and micro-animations |
| Paddle.js | Subscription checkout |
- Background Paths — Animated SVG paths flowing across sections
- Gradient Mesh — Dynamic gradient background on hero
- Skew Cards — 3D card tilt effect on feature showcase
- Stacking Cards — Scroll-triggered card stacking
- Spotlight Cards — Mouse-follow spotlight effect
- Marquee — Auto-scrolling testimonials
- AnimateIn — Intersection observer fade-in transitions