Awwwards 3d

Build production-grade Awwwards-style scroll-driven 3D websites in the visual language of Active Theory, Lusion, 14islands, Bonhomme, Resn, Studio Freight, Locomotive, and Igloo Inc. Use when the user asks for an "Awwwards-style", "scroll-driven 3D", "WebGL hero", "3D landing page", "interactive product showcase", "scroll storytelling site", "cinematic web experience", "creative dev portfolio", "premium 3D site", "Lusion-style", "Active Theory-style", "scroll 3D animation", or mentions Three.js + GSAP + Lenis together. Also triggers on Mongolian phrases like "3D вэб", "scroll-тэй 3D", "premium

34 stars 5 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add tsogjavklann/awwwards-3d --skill awwwards-3d

Manual install

git clone --depth 1 https://github.com/tsogjavklann/awwwards-3d.git /tmp/awwwards-3d
mkdir -p ~/.claude/skills
cp -r /tmp/awwwards-3d/. ~/.claude/skills/awwwards-3d

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Awwwards-Style 3D Websites

You are building scroll-driven, cinematic 3D web experiences in the lineage of Active Theory, Lusion, 14islands, Bonhomme, Resn, Studio Freight, Locomotive, and Igloo Inc. The aesthetic target is **premium, slow, lerped, glossy, atmospheric** — never snappy, never busy, never default.

## Core Philosophy

Read these before touching code. They are the difference between "Three.js demo" and "Awwwards Site of the Day".

1. **Aesthetics > Geometry.** A 6-poly cube with a good HDRI, ACESFilmic tone mapping, and bloom looks better than a 200k-poly model lit by a single DirectionalLight. Spend budget on lighting/post-processing first, geometry last.
2. **Lerp everything.** No value should ever change instantly. Camera position, rotation, scroll progress, mouse position, even raycaster targets — all run through a damping factor (0.06–0.1 is the sweet spot). The world feels alive because nothing snaps.
3. **Single-file HTML when possible.** Default deliverable is one `.html` file using ESM imports from `unpkg` (and `esm.sh` for GSAP). No build step unless the user explicitly asks for one. This is what makes the work portable, reviewable, and shareable.
4. **Mobile first, performance always.** Cap `pixelRatio` at `Math.min(devicePixelRatio, 2)`. Frustum-cull. Halve post-processing on mobile. Test on a mid-tier Android in Chrome DevTools before declaring done.

Read the full skill on GitHub

Details

Skill name: awwwards-3d
Repository: tsogjavklann/awwwards-3d
License: MIT
Repo updated: 8 May 2026

FAQ

What does the Awwwards 3d skill do?

How do I install the Awwwards 3d skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add tsogjavklann/awwwards-3d --skill awwwards-3d. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Awwwards 3d popular?

It lives in tsogjavklann/awwwards-3d, which has 34 GitHub stars and 5 forks.

Related skills

Xiaoer Upscale

Jane-xiaoer/claude-skill-xiaoer-upscale

在 Mac 上把图片本地放大/提清晰度(超分辨率),并装好「Finder 右键 → 快速操作 → 超分 4K/8K」。 USE WHEN 用户说图片放大、超分、提清晰度、图糊了、做高清版、把这张图变清楚、 4K/8K 图、image upscale、super resolution、右键放大图片、Mac 右键超分。纯本地离线、不用 API key、不花钱(OpenCV dnn_superres,CPU 即可)。

Images, Video & Audio

Data Master

MAGA2010/data-master

Analyze datasets with preserved raw inputs, explicit cleaning decisions, reproducible figures and PDF reports. Full statistics for one tabular file; descriptive time-series analysis; integrity profiling for text, image, audio, geographic and mixed inputs. Use for data cleaning, EDA, group comparisons, statistical reports, 跑数据 or 数据分析 with a traceable evidence trail.

Images, Video & Audio

Interflow Video Cut

derek-zhuolin/interflow-video-cut

Turn a local talking-head / 口播 video into metadata, transcript, and an AI-composed card-based video where the agent composes cards by cloning styled templates and filling them (designing bespoke only when content needs it), then renders to MP4. Ships with the Interflow AI club sign-off ("Interflow AI 出品"). Use when the user asks for interflow-video-cut, 口播成片, talking-head repurposing, video takeaways, transcript cleanup, or turning a spoken video into a captioned card video.

Images, Video & Audio

Cxp Character Forge

CXP-2024/cxp-character-forge

从参考立绘通过 Tripo 兼容代理生成带贴图的 3D 人物，接续 Blender 外形检查、组件修整、按需绑骨动作与资产交付。用于人物建模和已有生成任务续作。

Images, Video & Audio

Factory

AirsupHQ/factory-skill

Turn a one line description of a factory ("a line that makes 2,000 e-bike motors a day", "a bakery that bakes 10,000 croissants an hour", "a battery cell gigafactory") into a single self-contained HTML page with a live 3D tilt-shift miniature of that factory, driven by a real discrete event simulation (stations, cycle times, batches, finite buffers, shifts, breakdowns, scrap) with a live HUD for throughput against target, takt, utilization, WIP, lead time and the bottleneck, where clicking a station lets you add a machine or change a cycle time and watch the bottleneck move. Use it whenever so

Images, Video & Audio

AI Avatar Video

creatify-ai/ai-avatar-video

Complete AI avatar and talking-head video toolkit. Includes script writing for talking-head content, persona selection frameworks, multi-scene composition, voice/audio best practices, green screen techniques, and UGC-style authenticity guides. Integrates with Creatify API for AI Avatar v1/v2, Aurora, Text-to-Speech, Custom Avatars, and Voice Cloning. Use when: "avatar video", "talking head", "AI spokesperson", "lip sync", "UGC video", "Aurora", "text to speech", "voice clone", "AI presenter", "lipsync", "custom avatar", "green screen avatar", "AI narrator", "spokesperson video", "script for av

Images, Video & Audio

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.