Members-Only
Recent Talks & Demos are for members only
You must be an AI Tinkerers active member to view these talks and demos.
Panel: AI Comic Engine
See how a grid-based, AI-assisted engine transforms static comics into animated stories with interactive elements, demonstrating the crucial UX and data structure for AI integration.
Panel turns static comics into animated stories with game mechanics. It is a grid-based and AI-assisted engine and editor. It transforms a static page into a structured system of panels, media layers, dialogue bubbles, animations, loops, and reader-triggered interactions.
In the demo, I’ll show the current working prototype: the board/canvas view, panel inspector, visual grid editing, media layers, panel-level animation and interaction controls, the animated outline and dialogue system.
I’ll also show the first AI layer: generating static images directly into the grid, with support for character/style consistency and reference-based generation. The important part is the UX and how the generated asset lands inside an editable structure.
I’ll explain how the system is built around a DOM/React-based visual grid, how GSAP animation and interaction are layered on top of it, and how this structure can evolve into a more advanced AI-native workflow: video generation, layout/story assistance, and eventually an agentic layer that can understand user intent and orchestrate editing steps.
A grid-based engine integrating motion, game mechanics, and AI.
- ReactReact is an open-source JavaScript library for building dynamic user interfaces (UIs).React is a component-based JavaScript library, developed by Meta (Facebook), engineered for building fast, declarative UIs. It mandates a one-way data flow and utilizes a Virtual DOM mechanism to ensure efficient, predictable updates to the user interface. Developers construct complex UIs by composing small, encapsulated components; this architecture promotes code reusability and simplifies state management across large applications. The library employs JSX (a syntax extension) to integrate HTML-like markup directly within JavaScript logic, supporting development for both web (React DOM) and native mobile platforms (React Native).
- GSAPThe professional-grade JavaScript animation library: high-performance, cross-browser, and wildly robust.GSAP (GreenSock Animation Platform) is the industry-standard animation suite for the modern web, trusted on over 12 million sites. It’s a framework-agnostic library, delivering extreme performance: up to 20x faster than jQuery. You can animate nearly anything JavaScript can touch (CSS, SVG, React, WebGL, etc.), and the core API provides superior sequencing and control. Key plugins like ScrollTrigger enable complex, jaw-dropping scroll-based effects with minimal code, ensuring your animations are reliable and consistent across every major browser.
- ConvexFull-stack TypeScript platform: your reactive database and backend, always in sync.Convex is the full-stack development platform that eliminates backend complexity. It replaces traditional stacks (database, servers, WebSockets) with three core building blocks: Mutations (atomic writes), Queries (live, reactive subscriptions), and Actions (serverless functions for third-party APIs like OpenAI). You define your entire backend, from database schemas to authentication, in pure TypeScript. This 'everything-is-code' approach ensures end-to-end type safety and guarantees real-time synchronization: when data changes in the backend, your frontend updates automatically, simplifying state management significantly.
- Cloudflare R2Cloudflare R2: S3-compatible object storage engineered for zero egress fees, eliminating the 'data tax' for developers.R2 is a globally distributed object storage solution built to challenge traditional cloud providers by offering zero egress fees. This core feature ensures you can move data freely, avoiding vendor lock-in and unexpected bandwidth costs. It maintains full Amazon S3 API compatibility, guaranteeing seamless migration and integration with existing tools and workflows. R2 leverages Cloudflare’s global network (330+ data centers) for low-latency access and integrates natively with Cloudflare Workers, allowing you to build high-performance, serverless applications right at the edge.
- Vercel AI SDKThe Vercel AI SDK is the open-source TypeScript toolkit: a unified API for building AI-powered applications with LLMs from providers like OpenAI, Anthropic, and Google.This is the definitive TypeScript toolkit for building fast, reliable AI applications. The SDK provides a unified API, abstracting away provider-specific boilerplate so you can swap models—like OpenAI's GPT-4o or Anthropic's Claude 3.5 Sonnet—with a single line change. It features real-time response streaming, type-safe structured object generation via `generateObject`, and ready-to-use hooks such as `useChat` for popular frameworks: React, Next.js, and Svelte. Focus on agent logic and user experience; the SDK handles the complex, multi-provider integrations.