From idea to frontend
Use Codex to try a more ambitious interaction, build it in stages, and keep improving it with a goal while the workshop continues.
Demo
A Year in a Day
Five cities, one moving globe, and a day that changes as you scroll.
Open the experience01
Initial prompt
Start with the complete experience brief from the participant repository.
One Turning World — initial prompt
Build an immersive, scroll-driven editorial Vite application called “One Turning World” in the `landing-page-example` folder. Use React, TypeScript, Three.js, and Motion. The experience must be a single full-viewport, pinned spatial composition—not a conventional landing page made of sections, panels, cards, or columns.
CORE CONCEPT Tell the story of one day and one year through five cities: 1. Tokyo — Spring / sunrise 2. Cairo — Summer / rising daylight 3. Paris — Autumn / solar zenith 4. New York — Late Autumn / descending coral light 5. Ushuaia, Argentina — Deep Winter / sunset Scrolling moves continuously through all five cities. Each city lasts five substantial scroll states, for 25 states total. The transition from one city to the next happens automatically through scrolling. Do not display scene names, state counters, “1 of 5” labels, or explanatory captions for individual moments. The animation itself should communicate progression.
VISUAL COMPOSITION Keep the interactive Earth centered and make it the hero of the experience. - The scene fills the viewport. - The globe remains the same persistent Three.js instance for the entire journey. - It must never be cropped or clipped by the viewport. - It can be dragged or rotated by the user. - When a city becomes active, smoothly recenter the globe on its real geographic coordinates. - Keep markers for all five cities visible. - Give the current city marker a precise glow. - Every marker is clickable and scrolls directly to that city. - The globe changes lighting, atmosphere, clouds, city lights, and color treatment for each city, but never remounts or visually becomes a different object. - Use realistic Earth textures; these are the only raster textures allowed in this initial version. Place the current city name and one short editorial sentence in the lower-left area: Tokyo: “The city exhales in pink light, where tradition rises and tomorrow quietly takes shape.” Cairo: “Light becomes architecture, casting the river, stone and sky in molten gold.” Paris: “The afternoon folds into bronze, glass and the slow choreography of fallen leaves.” New York: “Steel catches the final coral light as the first snow edits the city into silence.” Ushuaia: “At the end of the continent, ice, wind and southern light move as one.” Use elegant high-contrast editorial typography such as Cormorant Garamond. The interface should feel cinematic, abstract, futuristic, restrained, and museum-like. Use subtle grain and atmospheric light, but no generic glass panels, pills, badges, cards, or conventional navigation bar.
THREE.JS CHOREOGRAPHY Create a separate abstract Three.js choreography surrounding the globe. Do not use generated landmark images, DOM images, billboards, or raster sprites in this version. Use procedural geometry, physical materials, particles, ribbons, and light: - Tokyo: sakura petals, abstract torii fragments, paper lantern forms, lacquered ribbons, chrome needles. - Cairo: glass bubbles, a refined lantern, brass minaret-like forms, warm stone facets, sand-colored geometry. - Paris: iron lattice ribbons, abstract cathedral lines, glass facets, autumn leaves, and a restrained Louvre-like glass pyramid. - New York: Art Deco fans, architectural lights, a sculptural clock, late-autumn leaves, and the first geometric snow. - Ushuaia: polar aurora ribbons, glacial prisms, soft snow volume, dark pebbles, ice facets, and windblown particles. Each city must feel like a five-part abstract dance. Scrolling changes which group is central, its scale, depth, orientation, and relationship to the globe. Objects should move spatially rather than changing through illustration crossfades. Use a persistent scene and frame-rate-independent time damping. Avoid remounting a complete Three.js scene on every city change. For Tokyo and Ushuaia, use synchronized rear and foreground WebGL canvases so their native 3D motifs can genuinely move from behind the globe to in front of it. Use depth-based layer switching with hysteresis to avoid flicker. Keep atmospheric orbital lines in the rear layer so they wrap visually behind the Earth rather than drawing over its surface. Only the active city’s choreography root should be visible. Objects from adjacent cities must not leak into the current composition.
SOLAR NAVIGATION Create an elegant solar-course stepper overlaid along the bottom of the viewport. Use an SVG quadratic Bézier path with approximately this geometry: - ViewBox: 0 0 1000 126 - Path: M 52 106 Q 500 -76 948 106 - City solar positions: [0.015, 0.25, 0.5, 0.75, 0.985] Calculate every city marker from the actual Bézier equation so the dots sit exactly on the curve. The stepper must include: - A visible sunrise half-sun at Tokyo. - A full radiant sun at the Paris zenith. - A visible sunset treatment at Ushuaia. - One active sun that moves continuously along the curve with scrolling. - Clickable dots for every city. - City names always visible. - Season names revealed on hover or keyboard focus; keep the active season visible on touch layouts. - A subtle glow on the travelled section of the arc. - A very subtle bottom-edge progress line for the entire journey. Clicking a city must land just inside that city’s section, not on the floating-point boundary belonging to the previous city.
RESPONSIVE BEHAVIOR On desktop and tablet, keep the globe centered and dominant. Do not return to a left-panel/right-panel layout. On mobile: - Preserve the globe as the central hero. - Keep the compact solar stepper overlaid along the bottom. - Keep all city names readable. - Keep the city copy below the globe without covering the stepper. - Let the choreography use the available edges of the viewport. - Do not hide the main navigation in a drawer.
QUALITY REQUIREMENTS - Smooth forward and reverse scrolling. - Smooth city recentering and theme transitions. - Delta-time-based damping instead of frame-count-based interpolation. - No sudden jumps or stuttering when changing cities. - No globe clipping at 390px, 768px, 1280px, or 1440px widths. - Keyboard-accessible city navigation. - Respect prefers-reduced-motion. - Clean browser console. - Production build must pass. Visually inspect the actual experience at desktop and mobile sizes. Do not consider the task complete based only on compilation or source inspection.
02
Build an ambitious page
Start with the interaction you want, then let Codex work through the CSS, animation, rendering, and library choices needed to make it real.
Describe the experience
Name the visual system, the interaction, and how the page should change as someone moves through it.
Mix generated assets and 3D
Use image generation for the visual material and a library for the globe, particles, or camera behavior.
Ask for the hard version
Complex animation and complicated CSS are implementation problems Codex can work through and test.
Try it, then adjust it
Open the running page, compare it with the intended experience, and steer the next change with specific evidence.
03
Build it in stages
Use a small sequence of visible results instead of asking one prompt to solve the entire experience at once.
01
Build the first experience
Get the globe, scroll model, city change, and overall visual direction working together.
02
Add the scene assets
Introduce sprites, landmarks, particles, and authored focal points without breaking the underlying interaction.
03
Refine the result
Review the running page, preserve what works, and fix the remaining visual, responsive, and accessibility problems.
04
Iteration prompt
Add the generated landmark sprites without redesigning the interaction that already works.
One Turning World — iteration prompt
Starting from the existing “One Turning World” application, add a restrained set of generated landmark sprites without redesigning the interface, globe, scroll system, typography, solar navigation, city ordering, or existing procedural choreography.
Use ImageGen to create original, immediately recognizable, isolated landmark cutouts: Cairo: - The Giza pyramids - The Great Sphinx Paris: - Eiffel Tower - Pont Alexandre III, including its ornate piers, gilded statues, lamps, and bridge span New York: - Empire State Building - Statue of Liberty - Brooklyn Bridge with recognizable Gothic stone towers and suspension cables Ushuaia: - Les Éclaireurs lighthouse on a compact snowy rocky islet - The End of the World Train: a vintage black steam locomotive with deep-red passenger carriages Do not add a Tokyo sprite. Keep Tokyo’s torii, lanterns, ribbons, needles, and sakura petals procedural.
Generate each asset individually as a high-end cinematic architectural or heritage-object cutout: - Realistic, recognizable proportions - Clean complete silhouette - Consistent editorial lighting - Restrained materials and color - No people - No text or logos - No skyline or unrelated scenery - No ground or water plane extending beyond the object - No generic planets, glossy orbs, or decorative objects unrelated to the city Create true transparent assets, or generate them on a perfectly flat chroma-key background and remove it carefully. Optimize the final assets as transparent WebP files in `public/sprites`.
Replace weak structural 3D approximations with these landmark sprites. Keep Three.js geometry for atmospheric and decorative material: petals, leaves, bubbles, snow, aurora, light, ribbons, facets, and small abstract fragments. Add a data-driven sprite configuration containing each asset’s entry point, focal point, exit point, scale, direction, orbit size, opacity, and focal position. Animate the landmarks around the persistent globe as the user progresses through each city. Different landmarks should take focus at different moments, while the existing abstract choreography continues around them. Do not show sprites belonging to inactive cities.
05
Keep iterating with a goal
A goal keeps the outcome and acceptance criteria stable while Codex continues working. Use new prompts to steer the current work without redefining the finish line.
Use a goal for longer work
Goals are useful when the task needs several passes, browser inspection, or work that can continue while you move on.
Write concrete acceptance criteria
Name the behavior, viewports, motion, accessibility, and checks that must be true before the result is done.
One Turning World — polish goal
GOAL Take the sprite-enhanced “One Turning World” experience to a finished, exhibition-quality level. Preserve the existing full-page composition, persistent globe, five-city sequence, solar navigation, typography, city copy, and abstract visual language. Continue iterating through real browser inspection until every landmark feels physically integrated into the globe-centered scene.
SPATIAL MOTION Treat every landmark as an object following a continuous globe-centered 3D orbit: 1. It begins small and genuinely behind the globe. 2. It approaches one outer limb of the Earth. 3. Its trajectory clears the globe before it changes to the foreground layer. 4. It crosses the foreground and becomes the visual focus. 5. It moves laterally and reveals the next object. 6. It returns around the opposite limb. 7. It changes back to the rear layer. 8. Its opacity softens only after it is safely hidden behind the Earth. Do not use opacity crossfades as the primary transition. A landmark must never disappear while visibly centered over the globe or in the foreground. Calculate limb clearance using the globe’s rendered radius and the displayed dimensions of each asset. Large bridges need a wider orbit than narrow towers. Use explicit rear and foreground compositing layers, with depth hysteresis around the switching threshold so assets do not flicker between layers. Motion must remain continuous when scrolling in either direction. Reversing scroll should reverse the same physical path rather than triggering a different animation.
CITY OWNERSHIP At any point, render only the active city’s landmarks and procedural root. Before a new city becomes active, every landmark from the previous city must already be outside the visible composition or behind the globe. Assets from Cairo must never remain visible in Paris; Paris assets must never appear beside New York before the New York section begins. Keep one persistent globe instance while city roots change.
ASSET QUALITY AND COMPOSITION Every generated landmark must remain sharply recognizable and must share the same elevated editorial treatment. - Cairo’s pyramids and Sphinx should feel like weathered monumental stone, not abstract triangles. - Paris should feature a credible Eiffel Tower and an elegant Pont Alexandre III positioned low in the composition. - New York must clearly include the Empire State Building, Brooklyn Bridge, and Statue of Liberty. - Ushuaia must unmistakably feel like deep winter, with the lighthouse, train, snow, glacial forms, and aurora. - Avoid generic floating planets, unexplained blue objects, arbitrary icons, or decorative structures that do not belong to the current city. - Bridges should read as horizontal architectural anchors near the lower edge of the globe. - Keep landmark sprites structurally credible; reserve procedural 3D geometry for texture and atmosphere. - Remove chroma fringes, matte halos, rectangular backgrounds, compression artifacts, and accidental shadows baked into transparent pixels. - Regenerate an asset if its silhouette or proportions cannot be corrected through placement alone.
MOTION QUALITY Use delta-time-based damping for: - City transitions - Sprite movement - Globe rotation and recentering - Lighting changes - Scale and depth - Ambient motion Transitions must remain smooth even after rapid scrolling or clicking between non-adjacent cities. Avoid abrupt velocity changes, snapping, saccades, and delayed asset catch-up. Keep orbital guide lines behind the globe. They should move continuously and subtly, without stepping, blunt rotation increments, or appearing painted over the Earth.
THE GLOBE The globe must remain fully visible and never be clipped on either side. When the city changes: - Smoothly recenter on the correct real-world coordinates. - Maintain all five city markers. - Emphasize the current marker with a specific glow. - Smoothly interpolate atmosphere, clouds, city lights, surface tint, and rim light. - Preserve direct clicking on every city marker.
SOLAR STEPPER Refine the bottom navigation so its meaning is immediately understandable without explanatory copy: - Tokyo is visibly sunrise. - Paris is visibly the solar zenith. - Ushuaia is visibly sunset. - The active sun travels continuously with scroll. - All city dots sit mathematically on the same solar curve. - City names remain visible. - Seasons appear on hover or keyboard focus and remain available on touch. - Every city dot is clickable. - The solar symbols and labels remain elegant, aligned, and unobtrusive. - Do not add scene names, state numbers, or extra progress labels.
SEASONAL CLARITY Communicate seasons through atmosphere and motion rather than large explanatory labels: - Tokyo: unmistakable spring petals and rose light. - Cairo: dry summer gold and heat-like glass. - Paris: bronze autumn light and falling leaves. - New York: late-autumn coral light transitioning into first snow. - Ushuaia: deep-blue winter, abundant snow, ice, aurora, and polar light.
VALIDATION LOOP Do not stop after a successful build. Inspect each city at its beginning, middle, and end, then inspect the transition into the next city. Test both forward and reverse movement. Validate at minimum: - 390 × 844 - 768px tablet width - 1280 × 720 - 1440 × 900 For every viewport: - Check that the globe is fully visible. - Check rear-to-front and front-to-rear sprite transitions. - Check that no sprite fades over the center of the globe. - Check that inactive-city assets are absent. - Click every globe marker and every solar city dot. - Check sunrise, zenith, and sunset alignment. - Check reduced-motion behavior and keyboard focus. - Inspect browser console errors and warnings. - Run the production build and diff checks. Use screenshots and live scrolling to refine scale, focal position, orbit clearance, pacing, lighting, and density. Continue until the experience feels fluid, coherent, physically plausible, and visually polished rather than merely technically functional.
Lunch
Next: browser-assisted debugging.