Ecliptic

Ecliptic transforms your ideas and assets into keynote-worthy presentations that move like authored web experiences, not ordinary slides.

Comment

Inspiration

My background is in designing and building websites and web apps at Elio. That work exposed me to what is possible when you combine the web with animation libraries, 3D, shaders, and creative code. You can create experiences that feel cinematic, immersive, and genuinely surprising.

Presentations, by comparison, still mostly operate as stacks of slides. Existing tools are excellent for arranging text and images, but creating something with the energy of a great interactive website usually means leaving the presentation tool and rebuilding the work in motion-design or development software.

I felt there was an opportunity for a web-native—and ultimately code-native—presentation platform. If presentations were built from the same primitives as modern web experiences, they could take advantage of richer animation and interaction while also giving AI the structure it needs to help create them end to end.

That idea became Ecliptic. Instead of beginning with slides, the user starts with a flexible Brief containing their ideas, script, images, SVGs, videos, and charts. A separate Style Kit defines the creative direction. Ecliptic turns those inputs into one continuous, presenter-controlled world where elements can persist, transform, assemble, and move between ideas.

What it does

Ecliptic provides an end-to-end presentation workflow:

  • Write or paste source material into a document-like Brief.
  • Add images, SVGs, video, charts, and explicit moment breaks directly within the narrative.
  • Define typography, color, motion, density, depth, and creative direction in the Style Kit.
  • Generate a narrative and scene plan with GPT-5.6 based on input Brief and assets.
  • Review the resulting presentation "cue by cue" in Canvas.
  • Make focused AI edits on individual elements without regenerating the entire production.
  • Rehearse with speaker notes, timing, next-cue previews, and presenter controls.
  • Publish a shareable URL to view the presentation.

The demonstration Ecliptic presentation found on the landing page contains nine slides expressed through twenty cues. Generated presentations are not forced into that count: they expand according to the source material. Every narrative source block and every supplied image or video must be assigned to a scene, preventing generation from silently discarding important reasoning or evidence.

The current visual system is called "Elio," named after my design/development studio (studioelio.com). It combines keynote-style clarity with bold typography, black linework, generous white space, tactile graphic forms, dynamic Anime.js animation, and a restrained Three.js effects.

How I built it

Ecliptic is built with React 19, TypeScript, and Vite. Tiptap powers the Brief editor, Anime.js handles text and cue motion, and Three.js provides the persistent WebGL layer. Every presentation is authored internally on a fixed 1920×1080 stage and scaled proportionally, so typography and composition remain stable across different sized presentation displays.

The backend runs on a Cloudflare Worker. Cloudflare D1 stores projects, immutable versions, generation jobs, AI usage, and the credit ledger. R2 stores uploaded media, while Cloudflare Workflows manages durable generation with retries, credit settlement, and failure recovery.

GPT-5.6 operates at the semantic and creative-direction layer:

  • GPT-5.6 Terra creates the initial source-grounded narrative, brief-specific art direction, and scene plan.
  • GPT-5.6 Sol repairs complete plans that fail Ecliptic’s quality review.
  • GPT-5.6 Luna provides focused co-director refinements for selected elements.

The models return strict structured output rather than executable presentation code. Ecliptic validates source coverage, asset placement, prose quality, composition variety, and schema correctness. A deterministic compiler then converts the accepted plan into reliable, authored choreography. This separation allows the model to make creative decisions without executing untrusted generated JavaScript.

Codex was my engineering partner throughout Build Week. It helped translate the product thesis into an architecture, implement the editor and presentation runtime, design the cue schema and deterministic compiler, build source-coverage and quality gates, integrate the OpenAI and Cloudflare systems, write automated tests, perform visual QA, and prepare the production deployment.

Challenges I faced

The largest challenge was that the first working output was technically impressive but creatively unsuccessful. Its animations were too fast and disconnected, text overflowed the stage, and the visual language leaned too heavily on a generic space aesthetic. It proved the architecture, but not the product thesis.

I responded by tearing down the presentation direction and rebuilding it around practical keynote structures: clear statements, progressive lists, process diagrams, comparisons, product frames, and decisive conclusions. Motion now has to reveal hierarchy, preserve context, or carry the audience into the next idea.

Text animation created another architectural decision. The original runtime used Motion, but important text-splitting functionality was commercially gated behind Motion+. I did not want future product capabilities to depend on a premium animation tier, so I migrated the runtime to the MIT-licensed Anime.js library and built text choreography around its accessible splitText support.

Presentation scaling was also deceptively difficult. Responsive web typography caused text and compositions to change unpredictably across viewports. Ecliptic now treats the output as a fixed 16:9 stage that scales uniformly, matching how presentation software is actually used.

Finally, AI generation tended to summarize aggressively. Longer source material could be reduced to a few nonsensical slogans while losing meaningful context. I introduced a source-coverage contract: every narrative block must be assigned exactly once, in order, and its meaning must survive in the stage copy or connected speaker notes.

What I learned

I learned that the most useful role for a language model in a creative system is not necessarily generating the final executable artifact. GPT-5.6 is strongest as a narrative director and semantic decision-maker, while a deterministic compiler provides the reliability required for live presentation software.

I also learned that authored defaults matter more than an abundance of shallow templates. Ecliptic currently proves one deep system instead of offering a large gallery of interchangeable styles. This decision was made after attempting to create 3 different templates and realizing that the quality was not good enough or differentiated enough from a traditional powerpoint-like program.

What’s next

The next step is to add additional visual styles, enable more deterministic style customization within the Brief editor, and expand the editing capabilities in Canvas so it can be a hybrid manual and AI-assisted editor.

Built With

Share this project:

Updates