Architecture

Better Flow consists of two separate codebases: the Landing Page (marketing + community site) and the Screenshot Studio (full canvas editor). This document covers the architecture of both.

Landing Page (web)

Overview

A Next.js 16 App Router site with no server components — every route and component uses "use client". The site serves as both a marketing landing page and a community hub.

Routing

Route
Description
/
Main landing page with responsive desktop/mobile variants
/mobile
Dedicated mobile route duplicating the landing page
/community
Community page with Manifesto, Contribution Flow, Open Source ethos, Activity, Integrations, CTA
/docs
Documentation (this site)

Component Architecture

app/
├── page.tsx               # Main landing
├── mobile/page.tsx        # Mobile route
├── community/page.tsx     # Community route
├── docs/                  # Documentation
├── components/
│   ├── community/         # Community page sections
│   ├── mobile/            # Mobile variants
│   ├── ui/                # ScrollStack, SpotlightCard, etc.
│   ├── Navbar.tsx         # Shared navigation
│   └── Footer.tsx         # Shared footer
├── sections/              # Landing page sections
└── hooks/                 # Custom hooks

Animation Architecture

Library
Purpose
framer-motion
UI entrances, hover effects, stagger children, whileInView triggers
GSAP + ScrollTrigger
Pinned scrolling sections, parallax, scrub-based animations
Lenis
Smooth scroll engine for the entire page

UI Component Patterns

• Card Style: rgba(18, 15, 23, 0.45) background, backdropFilter: blur(32px) saturate(1.3), 1px solid rgba(255, 255, 255, 0.08) border
• Typography: Dark theme with white text, secondary #a1a1aa, tertiary #71717a
• Brand Colors: Orange #ff7e40, Pink #ff4b72, Purple #a445ff
• Buttons: Glass-style with subtle borders, glow gradient buttons for primary CTAs

Community Page Sections

Section
Key Tech
Hero
Framer Motion, CSS gradients, Shapes3D
Manifesto
ScrollStack (React Bits), SpotlightCard
OpenSource
Framer Motion stagger, SpotlightCard
Activity
Framer Motion, SpotlightCard
ContributionFlow
SpotlightCard (mouse-tracking)
Integrations
Animated SVG, SpotlightCard
CTA
Aurora canvas, GSAP, Shapes3D

Screenshot Studio (better-flow)

Overview

A full browser-based screenshot editor using Next.js 16 with React 19. Canvas rendering via Konva, video export via FFmpeg WASM, state management via Zustand with undo/redo.

Canvas Rendering Architecture

The editor uses a dual rendering approach:

• HTML/CSS Layer — Backgrounds, shadows, borders, text overlays, annotations (styled with Tailwind)
• Konva Canvas Layer — Main image rendering, overlays, and 3D perspective transforms

State Management

Dual Zustand store pattern: useImageStore (image source, processing, upload, undo/redo via zundo) and useEditorStore (all editor settings — background, border, shadow, 3D, text, annotations).

Export Pipeline

4-stage compositing: HTML Render → Konva Render → Composite → Encode. Supports PNG/JPG for images, FFmpeg WASM / WebCodecs / MediaRecorder for video.

Animation System

• 20+ presets in 5 categories (Fade, Slide, Scale, Rotate, Complex)
• Timeline Editor with keyframe markers, playhead, ruler, and track controls
• Interpolation engine supporting linear, ease, ease-in, ease-out, ease-in-out, and custom cubic beziers

See the Contributing guide for development setup and standards. Full changelog available here.