# AE STUDIO SPACE Lessons

> Design and technology lessons with working browser experiments. Every lesson has English and Japanese editions. Available editable offline starters are linked from their lessons.

- [Creative Coding Lessons](https://aestudio.studio/lessons): Short design and technology lessons paired with original working browser demos.
- [One Clock. Many Movements.](https://aestudio.studio/lessons/one-clock): Connect a turning dial, a sine wave and a swaying tree with one shared clock. An interactive Math & Art lesson on phase, amplitude and synchronised motion.
- [How to Make Water](https://aestudio.studio/lessons/making-water): Make a little ocean from a sine wave. An interactive Math & Art lesson on amplitude, layered waves, surface normals and light.
- [Digital Life. Built from Lines.](https://aestudio.studio/lessons/digital-life): Create glowing organic forms from mirrored curves, layered filaments and scanning marks. An interactive creative coding and visual identity lesson.
- [A Cloud. A Little Squeeze.](https://aestudio.studio/lessons/cloud-passage): Build a soft cloud moving through two isometric towers. An interactive visual lesson on volume rendering, depth, deformation and timing.
- [A Card. Made of Light.](https://aestudio.studio/lessons/foil-card): Make an editable holographic ticket card. An interactive visual lesson on shape masks, foil colour, texture, pointer-driven light and transparent PNG export.
- [A Badge. With a Little Swing.](https://aestudio.studio/lessons/hanging-badge): Build a draggable hanging badge. An interactive visual lesson on rope constraints, off-centre grabbing, damping and a clear card holder.
- [Small Drops. One Liquid World.](https://aestudio.studio/lessons/liquid-orbit): Build a glossy liquid orb. An interactive visual lesson on metaball fields, surface lighting, expressive motion and spectral rings.
- [Shade First. Colour Later.](https://aestudio.studio/lessons/colour-alchemy): Build animated metallic lettering with native SVG. An interactive lesson on inner edges, grayscale gradients, film grain and editable colour lookup tables.
- [A Field. Woven Together.](https://aestudio.studio/lessons/natural-network): Create a living mesh over procedural grass. An interactive visual lesson on height fields, draped threads, vegetation coverage and generative composition.
- [A Little Light. Held in a Square.](https://aestudio.studio/lessons/glow-cards): Create atmospheric square cards. An interactive visual lesson on soft gradients, light beams, frosted glass, colour flow and restrained typography.
- [Small Buttons. Big Feelings.](https://aestudio.studio/lessons/emotional-buttons): Try twelve buttons with personality. An interactive idea page on magnetic movement, tilt, squash, glow, letter scatter and meaningful motion feedback, with an editable offline starter.
- [Small Marks. A Sense of Space.](https://aestudio.studio/lessons/character-space): Create a soft character-filled flight. An interactive visual lesson on perspective, depth, glyph particles, motion trails and editable mosaic lettering.
- [Soft Shapes. Diffuse Colour.](https://aestudio.studio/lessons/diffuse-gradient): Create a diffuse-gradient poster with soft silhouettes, spreading colour and stable grain. An interactive lesson with editable shapes, palettes, lettering and PNG export.
- [A Little Scroll. A Long Print.](https://aestudio.studio/lessons/scroll-press): Build a paper roll that prints as it travels. An interactive visual lesson on distance, scroll input, spring steering, rolling geometry and a reusable poster trail.
- [The Invisible Map Behind an Effect](https://aestudio.studio/lessons/invisible-map): A short lesson and working demo about UV coordinates, translation, scale and aspect correction.
- [Many Views. One Gaussian Field.](https://aestudio.studio/lessons/gaussian-splatting/index.html): Explore Gemini-generated object views and a procedural Gaussian splat model. Learn view consistency, camera alignment, soft footprints and a Houdini training workflow.
- [Coordinate Map Demo](https://aestudio.studio/lessons/invisible-map/demo): Explore a live WebGL pattern: change coordinate scale and offset, reveal the grid, and compare the result.