All projects

Test project 13 Jul 2024

castor - five DivKit paywall screens wired into one accessible flow

castor - five DivKit paywall screens wired into one accessible flow
  • DivKit
  • Server-Driven UI
  • HTML
  • CSS
  • Express
  • Cloudflare

Five DivKit paywall/onboarding screens, each a standalone HTML document rendering a server-driven JSON card into a phone frame, with no way to move between them, duplicated placeholder copy, images hotlinked from stale repositories, fixed-height clipping that cut content off, pure black-and-white color and no accessibility. Turned them into one cohesive flow: a host-level navigation layer around the DivKit output (tab bar, prev/next arrows, arrow-key and swipe support, all progressive enhancement over real links), full responsiveness (full-bleed on phones, a framed device on desktop, auto-height scrolling instead of clipping, and the 100vw overflow bug fixed), and accessibility throughout (landmarks, heading semantics, visible focus, reduced-motion, a skip link, real alt text, accessible names and actions on every CTA, and radio-group semantics on the plan selectors). Replaced the duplicated and placeholder copy with believable content, fixed nonsensical price-period labels, self-hosted every icon and image, removed invalid DivKit properties and debug artifacts, and unified all five on a single OKLCH design-token system. DivKit and an Express dev server, deployed static to Cloudflare Pages.

Live Code