# NacatamalOn examples

> Small, complete programs, one per feature, grouped by topic. Each one compiles against the engine:
> the site's build type-checks every one of them.

To read one, fetch `https://nacatamalon.com/llms/examples/<id>.md` with the id in backticks below. It has the
explanation and every file of its code. To see it running, open the link next to its id.

## Sprites and 2D

- `lighting-2d` [2D lighting](https://nacatamalon.com/en/examples/lighting-2d): A light follows the character and illuminates the world sprites. Move the explorer with the arrow keys and compare both renderers.
- `lighting-2d-campfire` [2D campfire](https://nacatamalon.com/en/examples/lighting-2d-campfire): Warm lights, particles and a forest lit around a campfire.
- `lighting-2d-cave` [A lit cave](https://nacatamalon.com/en/examples/lighting-2d-cave): A dark cave lit with 2D lights. Settings and components live in separate files.
- `lighting-2d-mine` [Mine lights](https://nacatamalon.com/en/examples/lighting-2d-mine): Explore a mine with local lights that colour its walls and objects.
- `layering` [Layering and alpha](https://nacatamalon.com/en/examples/layering): There is no depth buffer in 2D, so draw order is layering. Sprites carry a zIndex and the renderer sorts by it every frame.
- `tint-color` [Tint and colour](https://nacatamalon.com/en/examples/tint-color): A sprite's tint is multiplied into its picture every frame: the basis for hit flashes and fades.
- `pixel-art` [Pixel art](https://nacatamalon.com/en/examples/pixel-art): The smooth option picks crisp or linear filtering: hard pixels when a retro sprite is scaled up.
- `sprite-features` [Sprite features](https://nacatamalon.com/en/examples/sprite-features): flipX mirrors it, anchor moves the pivot, and an atlas shows only part of the picture.
- `glow-sprites` [Glowing sprites](https://nacatamalon.com/en/examples/glow-sprites): blend: 'additive' adds a sprite’s colour to what is behind it: lamp halos, a saucer’s beam and fireflies, compared live with ordinary blending.
- `sprite-animation` [Sprite animation](https://nacatamalon.com/en/examples/sprite-animation): Frame animation from an atlas, as a grid or as named rectangles, with looping and one-shot clips.
- `atlas-file` [Atlas as a file](https://nacatamalon.com/en/examples/atlas-file): An atlas authored as an .atlas file: the texture, how it is sliced and its named sequences, in one resource.
- `tilemap-file` [Tilemap](https://nacatamalon.com/en/examples/tilemap-file): A whole level from one .tilemap file: layers either side of the characters, one draw call each, tiles that cycle and tiles that break.
- `particles-2d` [Particles](https://nacatamalon.com/en/examples/particles-2d): A particle pool simulated on the CPU and drawn at once per emitter: fire, smoke and a burst on every click.
- `code-particles` [Particles written in code](https://nacatamalon.com/en/examples/code-particles): createParticles takes the effect written in code, with the fields of a .particles file: dust the colour of the ground, built per stage with lerpColor.
- `camera-follow` [Camera follow](https://nacatamalon.com/en/examples/camera-follow): A 2D camera tracking a moving target by moving its position every frame.
- `parallax` [Parallax](https://nacatamalon.com/en/examples/parallax): Five forest layers, each at its own speed: the 16-bit depth illusion.
- `formation` [Formation](https://nacatamalon.com/en/examples/formation): Forty sprites sharing one texture, placed and animated as one group.
- `camera-hud` [Camera and HUD](https://nacatamalon.com/en/examples/camera-hud): A 2D camera scrolls the world while useScreenSpace nails the HUD to the screen: one scene, two spaces.
- `tween-easing` [Tweens and easing](https://nacatamalon.com/en/examples/tween-easing): useTween carries a value from one place to another through a curve, with delay, repeat and yoyo.
- `tween-control` [Tween control](https://nacatamalon.com/en/examples/tween-control): A tween is declared once and played as many times as you like: play it, pause it, stop it, send it to the end or back to the start.
- `repeat-yoyo` [Repeat and yoyo](https://nacatamalon.com/en/examples/repeat-yoyo): A sprite’s run and a tween go round a number of times, or there and back, in the same words: repeat, yoyo and onRepeat.
- `tween-group` [Tween group](https://nacatamalon.com/en/examples/tween-group): tween.all joins several tweens into one, which says so when the last of them ends and plays again as often as you like.
- `tween-chain` [Tween chain](https://nacatamalon.com/en/examples/tween-chain): tween.chain plays tweens one after another and tween.all at the same time, one inside the other, declared once and played again from the start.
- `hello-world` [Hello world](https://nacatamalon.com/en/examples/hello-world): The smallest possible game: a canvas, a background colour and the loop running.
- `sprites` [Sprites](https://nacatamalon.com/en/examples/sprites): Every sprite is drawn as a textured quad; one with no texture is drawn as a plain coloured quad.
- `bunnymark` [Bunnymark](https://nacatamalon.com/en/examples/bunnymark): The classic stress test: hundreds of sprites bouncing at once to gauge how much the 2D path can take.
- `texture-loading` [Texture loading](https://nacatamalon.com/en/examples/texture-loading): useLoadTexture hands the texture back at once and fills it in when the image arrives: sprites pop in as they land.
- `transform` [Transform](https://nacatamalon.com/en/examples/transform): Position, rotation and scale on the sprite's transform. Rotation and scale pivot on its centre, so it spins where it stands.
- `auto-size` [Auto size](https://nacatamalon.com/en/examples/auto-size): With no width or height, a sprite takes its texture’s natural size as soon as it loads.
- `random-scatter` [Random scatter](https://nacatamalon.com/en/examples/random-scatter): useRandom is the game's seeded generator: with the same seed, the same scatter on every run.
- `backends` [Renderers](https://nacatamalon.com/en/examples/backends): The engine ships WebGPU and WebGL2, and the game never learns which one draws. Switch RENDERER and everything comes out the same.
- `painted-art` [Procedural pixel art](https://nacatamalon.com/en/examples/painted-art): Procedural art: a sky, hills and palms generated in code from a seed, with no image files and no canvas, and regenerated live.
- `living-texture` [Living texture](https://nacatamalon.com/en/examples/living-texture): Ground you can blow holes in: a click cuts a crater, only that rectangle is sent again, and the same picture is the collision.
- `palette-swap` [Palette swap](https://nacatamalon.com/en/examples/palette-swap): One drawn sprite, processed in code into other colours, an outline and a hit flash, with useLoadPixels and no extra picture drawn.
- `pixel-signs` [Pixel signs](https://nacatamalon.com/en/examples/pixel-signs): drawText writes into a picture painted in code: a motel sign in the engine’s own font, another in a .ttf, and sheep made of fillEllipse.
- `tile-platformer` [Platformer on tiles](https://nacatamalon.com/en/examples/tile-platformer): A character walking the map with no physics engine, the classic way: ledges to jump up through, a hill, ladders, belts that carry you, spikes that hurt and ice.
- `camera-follow-parallax` [Platformer camera and parallax](https://nacatamalon.com/en/examples/camera-follow-parallax): A camera that follows the hero the way the consoles did, with a dead zone, the edges of the map and a shake, and clouds and hills behind the level that move slower than it.
- `pixel-snap-camera` [Pixel snap camera](https://nacatamalon.com/en/examples/pixel-snap-camera): A camera moved by hand a fraction of a pixel a frame over stripes one pixel wide: with pixelSnap they keep their width. P goes through screen, game and off.
- `pixel-snap-scroll` [Pixel snap scroll](https://nacatamalon.com/en/examples/pixel-snap-scroll): A platformer level scrolled slowly at zoom 3: on the screen's pixels even the far clouds glide, on the game's they step three at once, and between pixels the tiles ripple.
- `console-screens` [Console screens](https://nacatamalon.com/en/examples/console-screens): SCREEN.CONSOLES.snes: 256 × 224 with pixels 8:7, as a television showed them. A disc drawn for the TV is round only with the TV's pixels.
- `scaling-modes` [Scaling modes](https://nacatamalon.com/en/examples/scaling-modes): The same 160 × 120 game fitted to the page four ways while it runs, with useGame().setScaling: integer, contain, fill and none.
- `canvas-placement` [Canvas placement](https://nacatamalon.com/en/examples/canvas-placement): Where the game sits in its page: where align says, if the game says; otherwise where the page asks with flex or grid, or in the middle.
- `camera-rooms` [Camera rooms](https://nacatamalon.com/en/examples/camera-rooms): A level seen room by room, as the action games of the consoles were: the camera stays in the hero’s room and scrolls across to the next when the hero walks out of it.
- `late-update-camera` [Camera with useLateUpdate](https://nacatamalon.com/en/examples/late-update-camera): A camera that follows the player from where it belongs, after every update of the scene, so the two never shake against each other.
- `collisions-tags` [Collisions and tags](https://nacatamalon.com/en/examples/collisions-tags): A shot that says itself what it hits: bats by their component, with their api typed, and crates by a tag. A HUD that counts the enemies left by their tag, and a rule of the scene for the ship.
- `masks` [Masks](https://nacatamalon.com/en/examples/masks): useMask keeps where something is drawn to a rectangle or to the shape of another object, hard, inverted or soft.
- `sprite-pivot` [Pivot](https://nacatamalon.com/en/examples/sprite-pivot): pivot: the point a sprite turns and grows about, when it is not where it is anchored.
- `fill-polygon` [Polygons in pixels](https://nacatamalon.com/en/examples/fill-polygon): fillPolygon paints a filled polygon into a picture made in code: hills, a ramp, a roof.
- `photo-capture` [Photo capture](https://nacatamalon.com/en/examples/photo-capture): useCapture photographs a part of the screen without the HUD, and says what came out in it and how much.
- `camera-skips-2d` [What the 2D camera skips](https://nacatamalon.com/en/examples/camera-skips-2d): What the camera cannot see is left out as the frame is collected, and a map draws only the cells on screen.
- `console-palettes` [Console palettes](https://nacatamalon.com/en/examples/console-palettes): One picture held to the colours of three machines with snapToPalette, the cells over the limit marked by checkColorLimit.
- `filters` [Filters](https://nacatamalon.com/en/examples/filters): useFilter runs effects over what one object draws: an outline, a glow, a drop shadow, a crt on a screen, and a hit flash written by hand.
- `minimap` [Minimap](https://nacatamalon.com/en/examples/minimap): The same level drawn again, whole and small, in the corner: a view of the world with a camera of its own. Click it and the hero goes there.
- `named-points` [Named points](https://nacatamalon.com/en/examples/named-points): A sword that hangs from the hand in every frame: each frame of the sheet says where the hand is, and pointOf gives that place in the world.
- `particles-sheet` [Particles from a sheet](https://nacatamalon.com/en/examples/particles-sheet): Particles that take their picture from a sprite sheet: a fire playing its run at its own pace, and an explosion that goes from a flash to smoke.
- `pixel-rows` [Pixel art in rows](https://nacatamalon.com/en/examples/pixel-rows): Pixel art written as rows of characters and a palette: a frog in four frames by name, hearts, and a tile stamped along the ground.
- `pixel-shading` [Shading with ramps](https://nacatamalon.com/en/examples/pixel-shading): Flat pictures given a lit side and a shadowed one with shadeWithRamp, a light that moves round, and a floor of fillDither.
- `shapes` [Shapes](https://nacatamalon.com/en/examples/shapes): createShapes draws a list of shapes each frame: a HUD with a rounded bar, a cooldown pie and a ring, joins and caps, a star, and a ship in lines with a glow.
- `split-screen` [Split screen](https://nacatamalon.com/en/examples/split-screen): One level, two players, each with half of the screen: two views of the world, each following its player with its own parallax.
- `tilemap-from-code` [A level made in code](https://nacatamalon.com/en/examples/tilemap-from-code): A level with no file: tiles and cells generated in code, walked on with useTileBody2d, with ledges, a ladder and bricks that break.

## Meshes and 3D

- `filters-3d` [Filters on models](https://nacatamalon.com/en/examples/filters-3d): Outline and glow on 3D models, respecting depth. Space toggles filters; O toggles the outline.
- `particles-3d` [Particles 3D](https://nacatamalon.com/en/examples/particles-3d): The same particle pool, drawn as squares that face the camera, in world units.
- `particles-3d-space` [Particles in space](https://nacatamalon.com/en/examples/particles-3d-space): A geyser and dust from their own files, one bent by the box it hangs from, and an orb whose aura travels with it while its trail is left behind.
- `particles-3d-stairs` [Particles on stairs](https://nacatamalon.com/en/examples/particles-3d-stairs): Sparks bounce down a staircase and rain ends on it: each step carries a particle collider.
- `two-cameras` [Two cameras](https://nacatamalon.com/en/examples/two-cameras): The 2D and 3D layers look through different cameras: WASD moves one, the arrows the other, and neither disturbs the other layer.
- `cube` [A cube](https://nacatamalon.com/en/examples/cube): A model is a shape, a place and a surface. The light is worked out at the corners and smeared across each face, as the consoles of the era did.
- `lighting-3d` [Lighting](https://nacatamalon.com/en/examples/lighting-3d): Three kinds of light: a sun with a direction and no place, a lamp that fades with distance, and a torch narrowed to a cone.
- `point-light-3d` [Point light](https://nacatamalon.com/en/examples/point-light-3d): usePointLight is a bulb: it has a place and fades with distance. Sweeping past a row of cubes, each one brightens and dims.
- `spot-light-3d` [Spot light](https://nacatamalon.com/en/examples/spot-light-3d): useSpotLight is a point light narrowed to a cone, sweeping a row of cubes on a floor.
- `rect-light-3d` [Panel light](https://nacatamalon.com/en/examples/rect-light-3d): useRectLight is a lamp shaped like a rectangle that shines from its front only: a strip in the ceiling and a window, beside bulbs to compare.
- `rect-light-neon` [Neon signs](https://nacatamalon.com/en/examples/rect-light-neon): Three neon signs as panel lights in an alley at night, one of them failing.
- `rect-light-tv` [TV glow](https://nacatamalon.com/en/examples/rect-light-tv): A television screen as a panel light whose colour and brightness change with every cut, lighting the room around it.
- `rect-light-corridor` [Ship corridor](https://nacatamalon.com/en/examples/rect-light-corridor): Eight ceiling strips down an endless corridor, the one left behind moved to the front; A sounds the alarm.
- `floor-3d` [3D floor](https://nacatamalon.com/en/examples/floor-3d): usePlaneGeometry as a ground plane under a cube, with the camera raised and pitched down so the plane is visible.
- `pixel-ortho` [Pixels and pieces](https://nacatamalon.com/en/examples/pixel-ortho): An orthographic 3D camera measures in the same pixels a sprite does, so a 3D piece can stand on a 2D tile.
- `gltf-model` [glTF model](https://nacatamalon.com/en/examples/gltf-model): useLoadModel hands the model back at once, still loading, and createModel puts it in the scene: it appears by itself when the file arrives.
- `model-parts` [A model and its parts](https://nacatamalon.com/en/examples/model-parts): This truck is five parts: a wheel on each side and a body that is paint, glass and trim. One placement moves them all.
- `gltf-skinned` [Bones](https://nacatamalon.com/en/examples/gltf-skinned): A rigged model is a skin over bones: a fox that surveys, walks and runs, easing between movements at the joints.
- `flatwood` [Flatwood](https://nacatamalon.com/en/examples/flatwood): A creature animated by hand in one .glb with eleven bones and four movements. Three loop; the fourth ends, and onEnd is told when it gets there.
- `mixed-2d-3d` [2D and 3D](https://nacatamalon.com/en/examples/mixed-2d-3d): Both halves in one scene, sorted by the same zIndex: a sprite behind the model and a panel in front.
- `hierarchy` [Hierarchy](https://nacatamalon.com/en/examples/hierarchy): The same three levels in flat pixels and in three dimensions: the moon only knows how far it is from its planet.
- `sprite-texture` [2D inside 3D](https://nacatamalon.com/en/examples/sprite-texture): createSpriteTexture draws a whole component into a picture every frame and a model shows it: the screen of a handheld.
- `camera-skips` [What the camera skips](https://nacatamalon.com/en/examples/camera-skips): A model wholly outside what a camera sees is not drawn at all. A camera above, told to skip by the eye, shows what the eye leaves out.
- `game-to-mesh-screen` [A 2D game on a 3D screen](https://nacatamalon.com/en/examples/game-to-mesh-screen): A mini 2D game written as ordinary components, knowing nothing about where it is shown, drawn on a panel's screen and a box's skin.
- `debug-picking` [Debug lines and picking](https://nacatamalon.com/en/examples/debug-picking): A grid, the axes and a gizmo on each crate, and the pointer turned into a ray that places a cross on the floor and picks crates.
- `backend-compare` [WebGPU vs WebGL2](https://nacatamalon.com/en/examples/backend-compare): The same scene, two games, two renderers, side by side. The scene never learns which one draws it.
- `pixel-ratio` [Pixel ratio](https://nacatamalon.com/en/examples/pixel-ratio): The same scene at pixelRatio 1, 2 and the screen's own: finer 3D edges on dense screens, and a sprite showing why pixel art stays at 1.
- `look-1997` [1997](https://nacatamalon.com/en/examples/look-1997): Every PlayStation trait at once: shivering vertices, affine textures, fog and dithering. Switch them off to see the same scene today.
- `fog` [Fog](https://nacatamalon.com/en/examples/fog): useFog: models fade into a colour as they get further from the camera, the Nintendo 64's signature and the classic way to hide where the world ends.
- `affine` [Affine textures](https://nacatamalon.com/en/examples/affine): The PlayStation's swimming textures: with affine, the picture is stretched straight across the screen without correcting for depth.
- `affine-cube` [Affine cube](https://nacatamalon.com/en/examples/affine-cube): Two cubes turning with the same picture: the right one is affine, and its picture bends and swims like on a PlayStation.
- `vertex-snap` [Vertex snapping](https://nacatamalon.com/en/examples/vertex-snap): The PlayStation shiver: with vertexSnap, corners land on a coarse grid of the screen and models jump as they move.
- `primitives-3d` [Primitives](https://nacatamalon.com/en/examples/primitives-3d): Eight shapes built in code rather than loaded: Blender's Add Mesh set minus the monkey.
- `many-lights` [Many lights](https://nacatamalon.com/en/examples/many-lights): Thirty-two lights a scene and eight a model, the era's ceiling. Only one casts a shadow, and the others keep lighting inside it.
- `torch-corridor` [Torch corridor](https://nacatamalon.com/en/examples/torch-corridor): Thirty-two lights a scene, eight a model: a corridor of torches lit all along, and a car with four lights of its own.
- `blob-shadow` [Blob shadow](https://nacatamalon.com/en/examples/blob-shadow): useBlobShadow puts a soft dark disc under something: the cheap shadow the era’s consoles actually used.
- `cast-shadows` [Cast shadows](https://nacatamalon.com/en/examples/cast-shadows): A light with castShadow throws the shape of things onto what is behind them; the fox casts the pose it is in.
- `gltf-shading` [Flat vs smooth shading](https://nacatamalon.com/en/examples/gltf-shading): How a model’s surface faces decides whether it reads as carved or moulded: flat on top, smooth below.
- `glow-maps` [Glow maps](https://nacatamalon.com/en/examples/glow-maps): A second picture in the model file lights its windows and its sign: the sun goes down, the glow stays.
- `glow-maps-arcade` [Glow maps: arcade](https://nacatamalon.com/en/examples/glow-maps-arcade): Screens, marquees and buttons lit by the model’s glow map. Switch the room’s light off and they stay lit.
- `painted-textures-3d` [Procedural 3D textures](https://nacatamalon.com/en/examples/painted-textures-3d): Checkerboard, brick and rock painted in code for models, and a noise picture a shader reads as a dissolve map.
- `card-duel` [Card duel](https://nacatamalon.com/en/examples/card-duel): Card-game style 3D cards: drawn, summoned face up, set face down and sideways, and flipped.
- `models-on-2d` [Models in a 2D scene](https://nacatamalon.com/en/examples/models-on-2d): Models sitting exactly where sprites are: the 3D camera measures in the game’s pixels, and models and sprites are sorted in one list.
- `fog-height` [Fog by height](https://nacatamalon.com/en/examples/fog-height): useFog({ height: { top, bottom } }): the low pillars of a valley sink into a sea of mist, however near.
- `follow-2d` [Models that follow the 2D camera](https://nacatamalon.com/en/examples/follow-2d): follow2d on an orthographic 3D camera: models placed in the 2D world like sprites, moved by the 2D camera.
- `pivot-3d` [Pivot in 3D](https://nacatamalon.com/en/examples/pivot-3d): transform.pivot: the point a model turns and grows about, a runner that stumbles over its feet.
- `cull` [Sides of a model](https://nacatamalon.com/en/examples/cull): cull on a material picks which side of its triangles is thrown away: 'back' seen from outside, 'none' both sides, 'front' seen from inside.
- `cull-house` [Light through walls](https://nacatamalon.com/en/examples/cull-house): A house of single sheets: from inside, cull 'none' keeps its walls, and only a street lamp that casts a shadow stops its light at the wall.
- `custom-geometry` [Shapes of your own](https://nacatamalon.com/en/examples/custom-geometry): useLatheGeometry turns half an outline into a round solid, and createGeometry builds a shape corner by corner, changed every frame with updateGeometry.
- `meshes-by-hand` [Meshes by hand](https://nacatamalon.com/en/examples/meshes-by-hand): createGeometry corner by corner: a star smooth and flat, a ramp painted at its corners, a field to dig and a comet's growing trail, changed with updateGeometry.
- `pictures-on-shapes` [Pictures on shapes](https://nacatamalon.com/en/examples/pictures-on-shapes): createGeometry with its uvs worked out by name: a building and a rock as a box, a barrel as a cylinder, a ball as a sphere and a floor from above, laid by the shape's own units with uvScale.
- `cut-outs` [Cut-outs](https://nacatamalon.com/en/examples/cut-outs): alphaCutoff cuts a picture out of its card: a fence, trees of crossed cards, grass, a paper figure and a torn banner, solid, unsorted and casting the shadow of their shapes.
- `gltf-body-parts` [Part of the body](https://nacatamalon.com/en/examples/gltf-body-parts): The legs keep running while the arms wave: a second animator on the same model, told which bones are its own with only.
- `occlusion` [Occlusion](https://nacatamalon.com/en/examples/occlusion): A model's creases darker, as its author saw them: a glTF's occlusion read by itself, and occlusion on createMesh painted in pixels.
- `view-2d-3d` [A view of 2D and 3D](https://nacatamalon.com/en/examples/view-2d-3d): Sprites and turning models in one world, and a view in the corner that sees both through its own 2D camera and a 3D one following it.

## Input

- `interactive` [Keyboard and pointer](https://nacatamalon.com/en/examples/interactive): useKeyboard to move a sprite, and three ways to give a sprite its pointer events.
- `gamepad` [Gamepad](https://nacatamalon.com/en/examples/gamepad): A pad tester: every button, trigger and stick at once, plus rumble. Needs a controller.
- `input-map` [Input map](https://nacatamalon.com/en/examples/input-map): Named actions bound to keys, pad buttons and stick directions at once, declared in project.json, with a controls screen to rebind them.
- `mouse-look` [Mouse look](https://nacatamalon.com/en/examples/mouse-look): A first-person camera: click to capture the mouse with usePointer().lock(), turn with movementX and movementY.
- `pointer-pick` [Pointer picking](https://nacatamalon.com/en/examples/pointer-pick): usePointer is one input for the whole scene, and every event says what is under the pointer.
- `pointer-press` [Pointer pressed, held, released](https://nacatamalon.com/en/examples/pointer-press): The pointer asked like the keyboard, from an update: a click fires once, holding charges, letting go of a full charge fires a big shot, and the right button changes colour.
- `drag-and-drop` [Drag & Drop](https://nacatamalon.com/en/examples/drag-and-drop): Cards dropped into slots and a slider with useDraggable, and a slingshot made with the drag events alone: a drag is never a click, and what it is let go over is the target.
- `fullscreen` [Full screen](https://nacatamalon.com/en/examples/fullscreen): The game asks for full screen with a click or a key, and scales to whole multiples with bars in its own colour.
- `touch-pad` [Touch pad](https://nacatamalon.com/en/examples/touch-pad): An on-screen pad for phones, drawn by the engine and read through actions: a thumb sliding between buttons, two thumbs at once, and a shot charged by holding.

## Physics

- `physics-document` [Falling crates](https://nacatamalon.com/en/examples/physics-document): A room whose floor, ledge and four crates are a JSON document, colliders and gravity included. The engine keeps the format but cannot move it: one installPhysics2d() is what makes it fall.
- `physics-code` [Bumpers](https://nacatamalon.com/en/examples/physics-code): The same physics written by hand: usePhysicsWorld2d and usePhysicsBody2d say what each object is made of, and the adapter does what the format cannot say.
- `physics-2d` [2D physics with Rapier](https://nacatamalon.com/en/examples/physics-2d): The 2D physics starting point: boxes rain down and pile up against static walls. In pixels, with y pointing down.
- `physics-2d-bounce` [Restitution ladder](https://nacatamalon.com/en/examples/physics-2d-bounce): Six identical balls dropped from one height, differing only in bounce from 0 to 0.95.
- `physics-2d-stack` [Box stack and wrecking ball](https://nacatamalon.com/en/examples/physics-2d-stack): An eight-box tower that has to stay standing. Click to fire a heavy ball through it.
- `physics-2d-shapes` [Convex polygons](https://nacatamalon.com/en/examples/physics-2d-shapes): Triangles, diamonds, pentagons and hexagons tumbling down static ramps. Corners are written around the object's centre.
- `physics-2d-platform` [Kinematic platform](https://nacatamalon.com/en/examples/physics-2d-platform): The third body type: a platform that carries and shoves crates, but that nothing can push back.
- `physics-2d-triggers` [Triggers and contacts](https://nacatamalon.com/en/examples/physics-2d-triggers): Crates cross a sensor band and recolour themselves with onEnter and onExit, knowing which object they met.
- `physics-2d-document` [Physics from a document](https://nacatamalon.com/en/examples/physics-2d-document): The same crates, written as data: a scene document run through sceneFromDoc, with installPhysics2d() supplying the simulation.
- `physics-bounce` [Bouncing balls](https://nacatamalon.com/en/examples/physics-bounce): Spheres that keep their energy across many bounces. Restitution belongs to the pair, so the floor asks for it too.
- `physics-stack` [Box stack](https://nacatamalon.com/en/examples/physics-stack): Eight boxes stacked into a tower that holds still. Click to topple it with a sideways impulse.
- `physics-dominoes` [Dominoes](https://nacatamalon.com/en/examples/physics-dominoes): A chain reaction nobody scripts: it falls out of contact and gravity. Click to push the first domino.
- `physics-bowling` [Bowling](https://nacatamalon.com/en/examples/physics-bowling): A dense sphere and one applyImpulse into ten light pins: the strike is momentum transfer. Click to bowl.
- `physics-pachinko` [Pachinko](https://nacatamalon.com/en/examples/physics-pachinko): Dynamic balls falling through static pegs: the same collider with another body type. Click to send them up.
- `physics-ramp` [Ramp cascade](https://nacatamalon.com/en/examples/physics-ramp): Marbles roll down a zigzag of tilted ramps. The turn orients the collider, not just the mesh.
- `physics-character` [Character walk](https://nacatamalon.com/en/examples/physics-character): A character, not a body: a capsule moved by queries against the world instead of by forces. WASD to walk, Space to jump.
- `physics` [Falling cubes](https://nacatamalon.com/en/examples/physics): The intro to 3D physics with the opt-in nacatamalon/physics3d adapter (Box3D in WASM). Click to kick the cubes.
- `physics-3d-document` [Tower from a document](https://nacatamalon.com/en/examples/physics-3d-document): The same physics written as data: a scene document handed to sceneFromDoc. The tower falls because the document says so.
- `physics-3d-triggers` [Sensor gate](https://nacatamalon.com/en/examples/physics-3d-triggers): A sensor is saved with the scene; hearing it is the adapter’s job. The gate marks each crate that falls through it, stopping none.
- `physics-2d-platformer` [Platformer in the 2D world](https://nacatamalon.com/en/examples/physics-2d-platformer): The same character inside the 2D physics world: the map is its walls, a bridge of planks on hinges sags under it, and it pushes crates.
- `physics-2d-joints` [2D joints](https://nacatamalon.com/en/examples/physics-2d-joints): The joints of the 2D world: a pendulum and a chain on hinges, a lamp on a rope, a weight on a spring, a lift on a slider and a windmill welded and turned by a motor.
- `piggy-roll` [Rolling piggies](https://nacatamalon.com/en/examples/piggy-roll): Minipiggies that roll like jelly, made of nothing but springs. You never move them: tilt the world and they roll downhill.
- `jelly-piggies` [Jelly piggies](https://nacatamalon.com/en/examples/jelly-piggies): Minipiggies as soft bodies: rings of springs that squash when they land and bulge as they roll, each face stretched over its own corners. Tilt the world and they roll downhill.
- `collisions-physics` [Collisions with physics](https://nacatamalon.com/en/examples/collisions-physics): Crates that are physics bodies say what they land on with the same line a hitbox uses, and physics layers with names: a crate turned ghost falls through the floor.

## Shaders

- `gpu-pass` [Game of Life on the GPU](https://nacatamalon.com/en/examples/gpu-pass): An advanced pass computes Game of Life: compute on WebGPU and fragment shaders on WebGL2. R resets both halves; drag to paint cells.
- `energy-charge` [Energy charge](https://nacatamalon.com/en/examples/energy-charge): A uniform driven by the game: the object you hand to createMaterial is the one the renderer reads, so writing a number into it reaches the next frame.
- `shader-effects` [Shader effects](https://nacatamalon.com/en/examples/shader-effects): A gallery of materials: dissolve, hologram, posterize, ghost, flash, hue, wave and chromatic aberration, each a single function.
- `effects-3d` [3D effects](https://nacatamalon.com/en/examples/effects-3d): Surface shaders on meshes: dissolve, fresnel hologram, force field and angle-based iridescence.
- `shader-effects-2` [Shader effects II](https://nacatamalon.com/en/examples/shader-effects-2): A second batch on sampleTexture(uv): glitch, swirl, blur, ripples, CRT warp, edges, old film and kaleidoscope.
- `effects-3d-2` [3D effects II](https://nacatamalon.com/en/examples/effects-3d-2): Another surface batch: procedural lava, a scan band, a thermal palette and a 1-bit Bayer dither.
- `lava-sea` [Lava sea](https://nacatamalon.com/en/examples/lava-sea): A Wave Race style rolling ocean, made of lava: one material using both mesh hooks, vertex and effect.
- `combined-fx` [Combined FX](https://nacatamalon.com/en/examples/combined-fx): Four materials using both hooks at once: a portal, a ghost, a crystal and a jelly.
- `specular` [Specular](https://nacatamalon.com/en/examples/specular): The Blinn-Phong highlight in the lighting model: a row of spheres from matte to glossy, changing only shininess.
- `shader-graph` [Shader graph](https://nacatamalon.com/en/examples/shader-graph): A shader written as typed values instead of WGSL: compileShader writes the fn effect createMaterial takes, in both languages.
- `shader-graph-3d` [Shader graph 3D](https://nacatamalon.com/en/examples/shader-graph-3d): One graph driving both stages of a model's material: colour and position.
- `shader-graph-portable` [Portable by construction](https://nacatamalon.com/en/examples/shader-graph-portable): The same cel and rim look composed as a graph, with no WGSL or GLSL, drawn by both renderers at once.
- `portable-shaders` [Portable shaders](https://nacatamalon.com/en/examples/portable-shaders): WebGL2 cannot compile WGSL and the engine will not pretend to translate it: a material may carry a second half in GLSL.
- `shader-inputs` [Shader inputs](https://nacatamalon.com/en/examples/shader-inputs): Everything the engine hands a shader, each input doing something you can see: a grid from mu.resolution, a stripe run by mu.time, and ten models each drawing one field of FragContext.
- `webgpu-only-shader` [When a shader is WebGPU only](https://nacatamalon.com/en/examples/webgpu-only-shader): The degradation, shown on purpose: with only its WGSL half, on WebGL2 the object draws through the built-in shader with a warning in the console.
- `scanlines` [Scanlines](https://nacatamalon.com/en/examples/scanlines): The first custom-shader material: createMaterial takes one function, and the engine hands it the picture already read and tinted.
- `toon-shading` [Toon shading](https://nacatamalon.com/en/examples/toon-shading): A model's material has two hooks: a colour one that cuts the light into bands and a vertex one that ripples the surface.
- `property-block` [Per-sprite uniforms](https://nacatamalon.com/en/examples/property-block): One material shared by fifteen sprites: the shader compiles once and each sprite sets its own uniforms.
- `shader-file` [Shader file](https://nacatamalon.com/en/examples/shader-file): An effect in its own file: the scene keeps the key and never the source, so it can be shared between scenes.
- `vertex-fx` [Vertex effects](https://nacatamalon.com/en/examples/vertex-fx): The vertex half of a mesh material: PS1-style jitter, inflate, twist and wave, with lighting untouched.
- `jelly-2d` [2D jelly](https://nacatamalon.com/en/examples/jelly-2d): LocoRoco style blobs: the vertex hook wobbles the rim and the fragment paints colour, gloss and a face.
- `material-maps` [Material maps](https://nacatamalon.com/en/examples/material-maps): Up to four extra pictures on a model material, read by its shader by name: chrome, a dissolve that keeps its colour, a detail map and water.
- `composer-atan2` [Angles in the composer](https://nacatamalon.com/en/examples/composer-atan2): composerAtan2 turns a place into how far round a centre it is: rays that turn, a ring that fills like a timer, and a sphere pushed into petals.
- `composer-looks` [Material looks](https://nacatamalon.com/en/examples/composer-looks): createMaterial({ lighting, steps }): toonLighting(), unlitLighting(), mangaDots() and rim(), with no shader written.
- `gas-station-looks` [Gas station looks](https://nacatamalon.com/en/examples/gas-station-looks): Material looks on a model made in a modelling tool: a gas station at dusk, ground painted in code and the nightcrawler walking it.
- `carry` [Carry](https://nacatamalon.com/en/examples/carry): A vertex hook hands four numbers to its colour hook with carry: a sea foamed by how high its waves lifted each corner, a block banded in its own space, and a crystal that glints corner by corner.
- `sprite-maps` [Sprite maps](https://nacatamalon.com/en/examples/sprite-maps): Extra pictures on a sprite's material, read at localUv(): a coin that crumbles in its own shape while it spins, a text letter by letter, water through noise.

## Post-processing

- `post-process` [Post-processing](https://nacatamalon.com/en/examples/post-process): A shader over the whole frame: scanlines and colour quantisation, switched on and off live.
- `post-dither` [Dither](https://nacatamalon.com/en/examples/post-dither): dither() cuts each channel to a few steps and hides the bands with an ordered pattern, the way consoles of the era did.
- `post-posterize` [Posterize](https://nacatamalon.com/en/examples/post-posterize): posterize() moves every colour to the nearest of a few steps: a gradient turns into flat bands.
- `post-palette` [A console palette](https://nacatamalon.com/en/examples/post-palette): paletteMatch() swaps every colour for the nearest in a palette: a NES with 54 colours or a Game Boy with four greens.
- `post-lut` [LUT grading](https://nacatamalon.com/en/examples/post-lut): lutGrade() looks every colour up in a grading table: dusk, night or sepia, and how much to apply.
- `post-crt` [CRT screen](https://nacatamalon.com/en/examples/post-crt): crt() puts the frame on a tube television: scanlines, phosphor mask, the bulge and glow of the glass, and four ready-made tubes.
- `post-effects` [Screen effects](https://nacatamalon.com/en/examples/post-effects): Mosaic, waves, shockwaves, bloom, light shafts, glitch, film, a composite cable and a handheld screen, each one call.
- `effects-switch` [Effects switch](https://nacatamalon.com/en/examples/effects-switch): The "CRT filter: on / off" of a game's options: F turns every screen effect off at once with useGame().setPostProcessEnabled; D, only the dither.
- `post-adjust` [Colour adjust](https://nacatamalon.com/en/examples/post-adjust): colorAdjust() is brightness, contrast, saturation, gamma, hue and tint in one effect, each starting where it changes nothing.
- `post-mosaic` [Mosaic](https://nacatamalon.com/en/examples/post-mosaic): mosaic() turns the frame into big square blocks, the hardware effect games used to dissolve between rooms.
- `post-wave` [Wave](https://nacatamalon.com/en/examples/post-wave): wave() slides each line of the frame sideways by a moving wave, the way the hardware drew heat and water.
- `post-shockwave` [Shockwave](https://nacatamalon.com/en/examples/post-shockwave): shockwave() is a ring that pushes the frame outwards as the game moves it: an explosion, a landing, a spell.
- `post-distort` [Distort](https://nacatamalon.com/en/examples/post-distort): distort() bulges, pinches or twists a round patch of the frame: a lens, a black hole, a whirlpool.
- `post-rgb-split` [RGB split](https://nacatamalon.com/en/examples/post-rgb-split): rgbSplit() reads red, green and blue from three slightly different places: a cheap lens, or a hit.
- `post-glitch` [Glitch](https://nacatamalon.com/en/examples/post-glitch): glitch() tears the frame into bands thrown sideways with the colours coming apart: a signal failing.
- `post-grain` [Grain](https://nacatamalon.com/en/examples/post-grain): grain() sprinkles the frame with moving grain, as chunky as the game's own pixels.
- `post-old-film` [Old film](https://nacatamalon.com/en/examples/post-old-film): oldFilm() is an old reel: sepia, grain, scratches, flicker and dark edges, at twenty-four frames a second.
- `post-halftone` [Halftone](https://nacatamalon.com/en/examples/post-halftone): halftone() prints the frame as a comic or a newspaper did: dots that grow in the dark, or crossed lines.
- `post-ntsc` [Composite cable](https://nacatamalon.com/en/examples/post-ntsc): ntsc() is the frame as it came down a composite cable: colour smeared sideways, crawling dots and rainbows.
- `post-lcd` [Handheld LCD](https://nacatamalon.com/en/examples/post-lcd): lcd() is the screen of a handheld: a grid between the pixels, a tinted panel, and ghosts behind anything that moves.
- `post-zoom-blur` [Zoom blur](https://nacatamalon.com/en/examples/post-zoom-blur): zoomBlur() smears the frame towards a point, as if the camera rushed at it.
- `post-motion-blur` [Motion blur](https://nacatamalon.com/en/examples/post-motion-blur): motionBlur() smears the whole frame along one direction, as if it moved during the exposure.
- `post-blur` [Blur](https://nacatamalon.com/en/examples/post-blur): blur() blurs the whole frame, worked out at half size so a wide blur stays cheap: a pause menu, being out of focus.
- `post-tilt-shift` [Tilt shift](https://nacatamalon.com/en/examples/post-tilt-shift): tiltShift() keeps one band sharp and blurs above and below it: the whole scene as a model on a table.
- `post-bloom` [Bloom](https://nacatamalon.com/en/examples/post-bloom): bloom() makes bright parts glow into what is around them, worked out at a quarter size so a wide glow stays cheap.
- `post-godrays` [Light shafts](https://nacatamalon.com/en/examples/post-godrays): godrays() streams shafts of light from a point past whatever stands in front of it: sun through trees, a window in a dark hall.
- `post-phosphor` [Phosphor trail](https://nacatamalon.com/en/examples/post-phosphor): phosphor() keeps a tube glowing a moment after the beam has gone: bright things moving fast leave a short trail.
- `post-ascii` [ASCII](https://nacatamalon.com/en/examples/post-ascii): ascii() draws the finished frame in letters, as dense as the picture is bright there.
- `console-color` [Console colours](https://nacatamalon.com/en/examples/console-color): consoleColor puts a colour on a console's steps where it is chosen, so dither leaves it flat and still patterns a gradient.
- `post-old-machine` [Old machine](https://nacatamalon.com/en/examples/post-old-machine): A 3D room drawn the way an old machine did: small and unsmoothed, toon light, a few colours with a dither, glow and a tube.
- `crt-showcase` [CRT showcase](https://nacatamalon.com/en/examples/crt-showcase): A 16-bit game seen through a television: one line of crt() on top of an ordinary scene.

## Audio

- `audio` [Sound and spatial audio](https://nacatamalon.com/en/examples/audio): useLoadAudio loads a clip like a texture and useSound plays it: overlapping effects, music on its own channel and a sound crossing the screen with the bird.
- `spatial-audio-3d` [Spatial audio 3D](https://nacatamalon.com/en/examples/spatial-audio-3d): The ears are in the perspective camera and face where it looks: a sound moving round it is heard all the way round.
- `sound-stage` [Sound stage](https://nacatamalon.com/en/examples/sound-stage): A level in four layers of sound: two-layer music, a zone ambience, a birdhouse with a cone and a coin. The ears are on the player.
- `layered-music` [Layered music](https://nacatamalon.com/en/examples/layered-music): One minuet recorded in four files, melody, harmony, bass and drums, played together and in time. Bring a layer in or out and it comes in on the beat, without the music starting over.
- `chiptune-song` [Chiptune song](https://nacatamalon.com/en/examples/chiptune-song): A minuet written as notes and played by the four voices of an 8-bit console. Drop a voice, change the tempo or the key without losing the beat.
- `song-beat` [On the beat](https://nacatamalon.com/en/examples/song-beat): A stadium organ with an intro that plays once before the loop, and a crowd that jumps on every beat with onBeat.
- `gammix-dance` [Gammix Dance](https://nacatamalon.com/en/examples/gammix-dance): Gammix bobs to the music, three frames chosen by where the song is in its beat with song.beat, and turns round every four bars with onBeat.
- `song-instruments` [Song instruments](https://nacatamalon.com/en/examples/song-instruments): The same four bars as plain tones and with instruments: volume, duty, arpeggio and pitch a frame at a time, vibrato and slide.
- `song-consoles` [Three consoles](https://nacatamalon.com/en/examples/song-consoles): The same four bars on the NES, the SNES and the Genesis, played with the engine's instruments.
- `song-library` [The engine songs](https://nacatamalon.com/en/examples/song-library): The thirty-nine public domain songs the engine has, asked for by key, with their tempo and key changed while they play.
- `tracker-songs` [FamiTracker songs](https://nacatamalon.com/en/examples/tracker-songs): Songs made in FamiTracker, by game, each made once into a .song and played on the engine's NES.
- `robot-serenade` [Robot Serenade](https://nacatamalon.com/en/examples/robot-serenade): A robot sings so that you do not go and slay the dragon: three scenes, three songs in English, sung by voices made sample by sample.
- `synthetic-voice` [Synthetic Voice](https://nacatamalon.com/en/examples/synthetic-voice): A voice made sample by sample, the way the machines of the eighties talked: it sings Daisy Bell, the first song a computer sang, and speaks Spanish read by rules.
- `tracker-loader` [Tracker loader](https://nacatamalon.com/en/examples/tracker-loader): FamiTracker songs loaded straight from their text export with useLoadTrackerSong, no .song made first, and played on the engine's NES.
- `ducking` [Ducking](https://nacatamalon.com/en/examples/ducking): A home run whose roar takes the music down while it sounds and lets it back up on its own, without touching the options volume.
- `sampled-sound` [Sound made in code](https://nacatamalon.com/en/examples/sampled-sound): A sound the game works out itself, sample by sample, with no file and no preset: the idle of a two-stroke engine that revs.

## Scenes

- `first-scene` [First scene](https://nacatamalon.com/en/examples/first-scene): A scene with a sprite and a useUpdate, spread across files: the anatomy of every scene.
- `spawn` [Spawn and destroy](https://nacatamalon.com/en/examples/spawn): Objects that come and go while the game runs: a tank fires bullets with useSpawn and each bullet ends its own life with destroy.
- `owner-of` [Owner of](https://nacatamalon.com/en/examples/owner-of): From the sprite under the pointer to the piece it belongs to: ownerOf(target) leads a click on a slime's eye to the whole slime, and destroy takes it all.
- `multi-scene-demo` [Multiple scenes](https://nacatamalon.com/en/examples/multi-scene-demo): Three scenes registered when the game is created: only the first starts, and you change between them by name.
- `scene-in-scene` [A scene inside a scene](https://nacatamalon.com/en/examples/scene-in-scene): A scene is an object: the one the scene system runs is the one drawn, and with useSpawn it is one more part of another.
- `pack-usage` [Using a pack](https://nacatamalon.com/en/examples/pack-usage): A pack loaded like any asset (useLoadPack) and placed twice (createPack), each copy with its own place and settings.
- `pack-ui` [Pack: a UI kit](https://nacatamalon.com/en/examples/pack-ui): A pack offering several pieces (a panel, a button, a badge): three copies of one button, each with its own label, reporting to the game.
- `pack-logic` [Pack: logic and scenes](https://nacatamalon.com/en/examples/pack-logic): A pack offering a scene with its logic: a room to walk and pick up coins, placed twice inside another scene.
- `scene-document` [Scene from a document](https://nacatamalon.com/en/examples/scene-document): The same room from JSON and by hand, side by side: sceneFromDoc gives back an ordinary scene function.
- `scene-transitions` [Scene transitions](https://nacatamalon.com/en/examples/scene-transitions): fade, wipe, iris and pixelate on scene.change: the shader is the easy half, the lifecycle is the rest.
- `pause-menu` [Pause menu](https://nacatamalon.com/en/examples/pause-menu): Launch a menu and pause the world: a paused scene keeps drawing, which is what makes this possible. Plus slow motion.
- `preload-bar` [Preload bar](https://nacatamalon.com/en/examples/preload-bar): A loading scene asks for 78 images and tracks them with useLoadProgress, then hands off to a level that uses a few by key.
- `hud-launch` [HUD with launch](https://nacatamalon.com/en/examples/hud-launch): useScene().launch runs a HUD scene alongside the gameplay one, in parallel, instead of replacing it.
- `scene-change` [Scene change](https://nacatamalon.com/en/examples/scene-change): useScene().change replaces the current scene with another: title and play swap on a timer.
- `scene-props` [Scenes with props](https://nacatamalon.com/en/examples/scene-props): A menu that opens the level it has chosen, and a level that goes back saying which one to have chosen: a scene takes props like a component, and TypeScript checks them when it is given by its function.
- `fixed-step` [Fixed step](https://nacatamalon.com/en/examples/fixed-step): The game moves in steps of exactly 1/60 of a second whatever the screen, the way the consoles did: a 144 Hz monitor and a 60 Hz one play the very same game.
- `box-from-doc` [Copies of a box](https://nacatamalon.com/en/examples/box-from-doc): useSpawn(boxFromDoc): a reusable box, as the editor saves one, made again and again while the game runs.
- `crossing-scenes` [Crossing scenes](https://nacatamalon.com/en/examples/crossing-scenes): Transitions with both scenes on screen at once: crossfade, push, and a wipe, an iris and a clock mask with the new scene behind them.
- `transition-masks` [Transition masks](https://nacatamalon.com/en/examples/transition-masks): dissolve covers in the order a picture's greys say, darkest first: a star, a spiral, blinds, tiles and grain painted in code, and a clock from a file.

## State and scripts

- `save-the-room` [Save the room](https://nacatamalon.com/en/examples/save-the-room): Save and restore a scene with its objects and scripts. The HUD shows the controls and document state.
- `store-document` [A store from a document](https://nacatamalon.com/en/examples/store-document): Load a pet whose state and actions are defined in a document. Change its values and see the scene react.
- `attach-script` [Attach a script](https://nacatamalon.com/en/examples/attach-script): A behaviour with a name, written once and attached to three objects with different settings.
- `script-compose` [Scripts that compose](https://nacatamalon.com/en/examples/script-compose): Three behaviours on one object, in three files, with no imports between them: spin publishes how to stop it and toggle reaches it by name.
- `data-watch` [Data and watch](https://nacatamalon.com/en/examples/data-watch): useData is state a piece of the scene owns, read as lives.value; useWatch runs when it changes and once on the first frame.
- `shared-data` [Shared data](https://nacatamalon.com/en/examples/shared-data): One useData handed to three parts of the scene: a HUD, a bar and the generator that changes it. Each watches it on its own.
- `watch-load` [Watch a load](https://nacatamalon.com/en/examples/watch-load): useWatch over an asset: the texture announces itself when it lands, so the placeholder is swapped by a callback that runs twice.
- `store-state` [Store and persistence](https://nacatamalon.com/en/examples/store-state): createGameStore split across files (state and actions), saved to localStorage so the pet survives a reload.
- `signals` [Signals](https://nacatamalon.com/en/examples/signals): A named event channel: a button emits with createGameSignal and a far-apart screen reacts with useSignal, with no reference between them.

## Text and UI

- `nine-slice` [Nine-slice](https://nacatamalon.com/en/examples/nine-slice): One frame picture at any size without deforming its corners: a stretched sprite beside createNineSlice stretching, tiling and fitting.
- `bitmap-text` [Bitmap text](https://nacatamalon.com/en/examples/bitmap-text): useLoadBitmapFont loads a bitmap font and createText writes with it, live score counter included.
- `font-gallery` [Font gallery](https://nacatamalon.com/en/examples/font-gallery): Two free bitmap fonts at different sizes and tints, and a scrolling ticker.
- `arcade-keyboard` [Arcade high scores](https://nacatamalon.com/en/examples/arcade-keyboard): The classic high-score table, with name entry from the keyboard.
- `dancing-fonts` [Dancing fonts](https://nacatamalon.com/en/examples/dancing-fonts): A per-letter wave, a rainbow cascade, a CRT glitch and a scrolling ticker: every character animated on its own.
- `text-menu` [Text menu](https://nacatamalon.com/en/examples/text-menu): Texts take the same pointer events as sprites: a menu that lights up on hover and changes scene.
- `text-wrap` [Text wrap](https://nacatamalon.com/en/examples/text-wrap): style.maxWidth breaks a text's lines by itself, and measureText says how it is set: a sign that fits its words, and a dialogue written letter by letter.
- `letter-at` [Letter at](https://nacatamalon.com/en/examples/letter-at): letterAt(text, info) says which letter of a text is under the pointer: to spell a word, or to pick a word of dialogue.
- `vector-fonts` [Vector fonts](https://nacatamalon.com/en/examples/vector-fonts): useLoadFont reads a .ttf or .woff, and the text stays sharp at any size, scale, turn or camera zoom.
- `fonts-across-scenes` [Fonts across scenes](https://nacatamalon.com/en/examples/fonts-across-scenes): One scene loads every font under a key; the rest of the game names them with font: 'title'.
- `arcade-attract` [Arcade attract screen](https://nacatamalon.com/en/examples/arcade-attract): Two .ttf fonts under bloom, an NTSC cable, a CRT tube and a glitch on demand.
- `builtin-fonts` [Built-in fonts](https://nacatamalon.com/en/examples/builtin-fonts): Three fonts every game has, named by key: Nacatamal Arcade, Square and Thin, with accents, ñ and icons.

## Frameworks

- `react-hud` [React HUD](https://nacatamalon.com/en/examples/react-hud): nacatamalon/react: the game runs in <Game> and the HUD is React components over the canvas. Both sides read the same store.

## Experiments

- `cloth` [Cloth](https://nacatamalon.com/en/examples/cloth): The classic cloth: 1,040 points joined by springs. The mouse pokes it, dragging grabs and tears it, and shift cuts it.
- `warp-tunnel` [Warp tunnel](https://nacatamalon.com/en/examples/warp-tunnel): The demoscene classic: a wireframe tube that bends and cycles through the rainbow, and 700 stars that stretch into streaks at warp speed.
- `mode-7` [Mode 7](https://nacatamalon.com/en/examples/mode-7): The floor of F-Zero and Super Mario Kart at the SNES's own 320×224: one flat track picture, turned and stretched per pixel by a material.
- `boids` [Boids](https://nacatamalon.com/en/examples/boids): A shoal of 450 fish with no leader, following three rules. The mouse is a predator and a click drops food.
- `plasma` [Plasma and metaballs](https://nacatamalon.com/en/examples/plasma): Two demoscene classics on one material: a palette-cycling plasma and six blobs of lava that melt together, one of them following the mouse.
- `campfire` [Campfire](https://nacatamalon.com/en/examples/campfire): A fire in a clearing at night: flames, sparks that bounce off the ground and smoke, a flickering light, and the moon throwing shadows.
- `tentacles` [Tentacles](https://nacatamalon.com/en/examples/tentacles): A creature with eight arms of 24 joints, solved by inverse kinematics: they reach for the mouse, and a click sends it swimming.
- `ripples` [Ripples](https://nacatamalon.com/en/examples/ripples): A pond seen from above: every drop sends out a ring that refracts the bottom and catches the light.
- `game-of-life` [Game of Life](https://nacatamalon.com/en/examples/game-of-life): Conway's Game of Life on 17,000 cells, run entirely on the graphics card by two textures taking turns.
- `doom-fire` [Doom fire](https://nacatamalon.com/en/examples/doom-fire): The fire of Doom on the PlayStation and the Nintendo 64, with a word burning in it, computed on the graphics card.
- `fireworks` [Fireworks](https://nacatamalon.com/en/examples/fireworks): Rockets that burst into palms of sparks that crackle as they die: three .particles files setting each other off.
- `storm` [Storm](https://nacatamalon.com/en/examples/storm): A village in the rain: a click on the ground calls down a bolt that lights everything, and the thunder arrives later the further away it struck.
- `cracktro` [Cracktro](https://nacatamalon.com/en/examples/cracktro): An Amiga cracktro at 320×256: copper bars, a logo that bounces letter by letter, three layers of stars, a sine scroller and a chiptune.
- `bottles` [Bottles](https://nacatamalon.com/en/examples/bottles): Bottles of water and soda whose liquid sloshes, keeps its volume, ripples, foams at the glass and fizzes, turned from one profile and shaded with the shader composer.
- `energy-shield` [Energy shield](https://nacatamalon.com/en/examples/energy-shield): A plasma cannon against an energy shield: one sprite material with its honeycomb and its cracks as maps painted in code.
- `volumetric-fog` [Volumetric fog](https://nacatamalon.com/en/examples/volumetric-fog): Ground fog that behaves like a fluid: 48 see-through sheets share one 3D material that reads a fluid simulated on the CPU.
- `lightning` [Lightning](https://nacatamalon.com/en/examples/lightning): A lightning strike over a city at night, painted in code: a bolt with branches, a glow in dithered bands, sparks, bloom and synthesized thunder.