What Iron and Oak Podcast required
Iron and Oak is a podcast platform built around 12 episodes exploring foundational theology through 109 deep questions, organized into 5 phases. The brief: build a cinematic media brand that competes on craft with the best podcast websites in the country, ship 134 pre-rendered pages, support deep content navigation, and feel like a film, not a typical podcast site.
The full Iron and Oak platform
Preisser Tech designed and built the entire site from scratch:
- Custom design system with dark mode default, light mode toggle, and full typography hierarchy
- 134 pre-rendered pages: home, episodes index, episode detail (×12), questions index, question detail (×109), series, hosts, and static pages
- GSAP + ScrollTrigger animations for cinematic scroll experiences
- Lenis smooth scroll integration with proper GSAP ticker sync (no jank)
- Custom canvas effects: gradient background, forge intro animation, iron sparks
- Page transitions via Framer Motion AnimatePresence
- Full content data architecture in TypeScript (12 episodes, 109 questions, 5 phases, 2 hosts)
- Static export to Cloudflare Pages — global edge distribution
- Full SEO and AEO foundation: schema.org markup, structured data for episodes and articles, sitemap with 134 URLs, IndexNow integration
- Mobile-first responsive design with reduced-motion support
Technologies used
Iron and Oak is a direct example of the Preisser Tech custom website stack:
- Next.js 16.2.1 (App Router) for static export and routing
- React 19.2.4 for component architecture
- TypeScript for full type safety
- Tailwind v4 for utility-first styling with CSS custom property tokens
- GSAP 3.14.2 + ScrollTrigger for scroll-driven animations
- Lenis 1.3.20 for smooth scroll
- Framer Motion v12 for page transitions
- Cloudflare Pages for edge CDN deployment
How the cinematic feel was achieved
The cinematic feel comes from disciplined animation engineering, not flashy effects:
- GSAP + ScrollTrigger for scroll-driven animation only — never page transitions
- Framer Motion for page transitions and micro-interactions only — never scroll
- Lenis smooth scroll synced with GSAP ticker to prevent animation jank
- All effects respect prefers-reduced-motion: reduce
- Custom canvas effects (gradient mesh, forge intro, iron sparks) ship as standalone components
- No mixing of animation libraries on the same element
What made the Iron and Oak build successful
Iron and Oak shipped on time, builds clean, and competes on craft with the best podcast websites because:
- Custom-coded from scratch — no template platform constraining the cinematic vision
- Tyler personally coded every page — no junior associates, no agency handoff
- Strict animation discipline (GSAP for scroll, Framer Motion for transitions, never mix)
- Static export to Cloudflare Pages — every page pre-rendered, near-instant load globally
- Full data-driven architecture — episodes, questions, hosts all live in TypeScript data files
- Dark mode default with proper light mode support — a brand decision the build was engineered around
