napali
by Leonxlnx
A drone flight over the Na Pali coast, rendered entirely in code. No textures, images or models.
57stars
10forks
HTML
Added 10/24/2026
Available after the catalog security scan passes.
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Maintainer of this skill?
Installation
# Add to your Claude Code skills
git clone https://github.com/Leonxlnx/napaliGetting Started
Guides for using ai agents skills like napali.
- Caveman: Cut Claude Token Use by 65%How agent-side prompt compression works, when to use it, and when not to.
- What is an AI Skills Marketplace?Definitions, how marketplaces work, and how to choose between them in 2026.
- Getting Started with AI SkillsFirst-time install walkthrough for Claude Code, Codex CLI, and ChatGPT.
Compare with similar skills
See how napali compares with popular alternatives.
napali
A drone flight over the Na Pali coast (Kauai), rendered entirely in code.
No textures, no images, no 3D models, no downloaded assets. Terrain, erosion, coastline, ocean, surf and foam, reefs,
palms and forest, rock, clouds, haze, lighting and the colour grade are all generated in WebGL2 shaders and a little
JavaScript, in a single self-contained index.html.
Built with Claude Code (Claude Opus 5.5) over 13 rounds of agent work, most of them with parallel specialists for water, sky, terrain and vegetation, a merge step, and a judge that compared each round against a set of reference photos of the coast.
Run it
Open index.html in a recent Chrome (or any browser with WebGL2) and wait for the shaders to compile. The first load can
take 30-90 s; after that it starts quickly.
| URL | What it shows |
|---|---|
index.html |
the drone flight in real time |
index.html?mode=still |
the final aerial composition as a high-quality still (&spp=16 by default) |
In the flight view: Space pause, R restart, ← / → skip 5 s, F fullscreen, H toggle the HUD.
The page needs a decent GPU. It was developed on a laptop with an integrated GPU, where a 1672x941 frame takes about 1-2 s offline, so the real-time view drops resolution automatically.
Render a video
The tools in tools/ drive headless Chrome over the DevTools protocol. They need Node 22+, Chrome and ffmpeg on the PATH.
# a still of the final aerial composition (shot.mjs renders mode=still)
node tools/shot.mjs out.png "spp=4&hud=0"
# the whole flight: out.mp4 width height fps samples-per-frame extra-url-params
node tools/video.mjs flight.mp4 1920 1080 30 4 "hud=0&bandpx=5000"
# contact sheet of single frames at the given flight times (seconds)
node tools/video.mjs --sheet sheet.png "10,40,80,120" 960 540 "hud=0"
Useful environment variables for video.mjs:
| Variable | Effect |
|---|---|
SPEED=2.5 |
play the flight 2.5x faster (motion blur is scaled to match) |
T0=11 T1=22 |
render only that part of the video (seconds of video), e.g. to render in crash-safe segments |
FRAME_PAUSE_MS=60 |
let the GPU idle between frames |
ANGLE=vulkan |
ANGLE backend (much faster shader compile than D3D11 on Windows) |
CHROME=/path/to/chrome |
Chrome binary if it is not in the default location |
Only one render runs on the GPU at a time: tools/cdp.mjs holds a machine-wide lock in the temp folder and rests the GPU
for 20 s after each render. bandpx splits each frame into smaller GPU chunks. Both exist because several parallel
renders crashed the graphics driver on an integrated GPU.
The published video was rendered at 1080p30 with 4 samples per frame and SPEED=2.5 (1,584 frames).
Build from the parts
index.html is generated. Edit the parts in tools/ and rebuild:
node tools/rebuild.cjs
| File | Contents |
|---|---|
v2_template_backup.html |
page, terrain generation and erosion passes, FFT ocean, post-processing chain |
v3_geo.glsl |
signed-distance geometry: terrain, rock relief, trees, palms, canopy, ray march, shadows |
v3_shade.glsl |
materials and lighting for land, rock, sand and vegetation |
v4_water.glsl |
water shading: depth colour, reefs, foam, surf, glints |
v4_sky.glsl |
sky dome, volumetric cumulus, cirrus |
tweaks.cjs |
string patches on the template: vegetation mask, beach profile, haze, the colour grade |
patch_v3.cjs, patch_v4.cjs |
splice the GLSL parts and the plant placement pass into the template |
v2_flight.js |
camera paths (cinematic flight and FPV keys) |
v2_coast.txt, v2_coastsdf.txt, v2_build.txt |
coastline polygon and terrain build data |
Most look parameters are exposed as URL knobs (see num('...') calls in the page), so they can be tuned without a rebuild.
Credits
- Code: Leon Lin (@LexnLin), built with Claude Code.
- The music in the published video is "Heroic Age" by Kevin MacLeod (incompetech.com), licensed under Creative Commons: By Attribution 4.0. It is not part of this repository.
- The reference photos used to judge the renders are not included.
License
Frequently Asked Questions
What is napali?
napali is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by Leonxlnx. A drone flight over the Na Pali coast, rendered entirely in code. No textures, images or models. It has 57 GitHub stars.
Is napali safe to use?
napali's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
How do I install napali?
Clone the repository with "git clone https://github.com/Leonxlnx/napali" and add it to your Claude Code skills directory (see the Installation section above).
What programming language is napali written in?
napali is primarily written in HTML. It is open-source under Leonxlnx on GitHub, so you can review or fork the full source.
Are there alternatives to napali?
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh napali against similar tools.
Comments (0)
to leave a comment.
No comments yet. Be the first to share your thoughts!
Related Skills
Reverse engineer anything with agents, from app behavior down to native binaries.
374,645
93,697
TypeScript
AI Agentsagent-skillsai-agents
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
287,505
42,630
JavaScript
AI Agentsai-agentsanthropic
Skills for Real Engineers. Straight from my .agents directory.
250,518
21,171
Shell
AI Agents
An agentic skills framework & software development methodology that works.
234,966
20,863
Shell
AI Agentsaibrainstorming