Logo Intro

Build an animated WebGL logo intro from a brand's SVG logo. The mark arrives from a lens-warped, colour-fringed close-up, the wordmark pulls out of it, a gradient bloom grows, a lock-in beat (a badge pops, two parts snap together, inner layers rise, or the mark spins) sends out a ring, and a shimmer sweeps the logo. Outputs a single HTML file, an embeddable site splash, or an MP4/WebM video. Use when someone asks for a logo animation, brand intro, opening/splash animation for a website, an intro video like ElevenLabs', or to animate a specific company's logo.

5 starsFrontend & Design

Install

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

npx skills add CJ10110425/logo-intro --skill logo-intro

Manual install

git clone --depth 1 https://github.com/CJ10110425/logo-intro.git /tmp/logo-intro
mkdir -p ~/.claude/skills
cp -r /tmp/logo-intro/. ~/.claude/skills/logo-intro

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

From the SKILL.md

# Logo intro

This folder is both the skill and the engine. Paths below are relative to it.

- `src/logo-intro.js`: the engine, one dependency-free ES module (`mountLogoIntro`).
- `src/controls.js`: preview playback bar.
- `scripts/build-html.mjs`: writes brand JSON to a single self-contained HTML page.
- `scripts/export-video.mjs`: renders frames in headless Chromium and encodes MP4/WebM with ffmpeg.
- `brands/*.json`: example brand configs. `references/brand-schema.md` documents every field.

## Workflow

### 1. Get the logo as SVG
Look in this order:
1. The site header's inline `<svg>` (for example `document.querySelector('a[href="/"] svg').outerHTML`) or `<img src="*.svg">`.
2. `/favicon.svg`.
3. The brand's press kit.
4. The largest PNG you can find: the header logo, a footer logo, the apple-touch icon, or a social profile avatar when the brand has no website.

Prefer the horizontal lockup, meaning the mark and the wordmark in one SVG. Read the file's text instead of downloading binaries. Fetch it in the page context (for example `fetch('/logo.svg').then(r => r.text())`).

**PNG-only logos.** Many sites ship only a PNG. Trace it:
1. Render the PNG large, at least 2000 px wide.
2. Classify each pixel to its nearest palette colour: the background, the letter colour, and each mark colour.
3. Run `potrace -b svg` on each colour mask.

Read the full skill on GitHub

Details

Skill name: logo-intro
Repository: CJ10110425/logo-intro
License: MIT
Repo updated: 29 September 2026

FAQ

What does the Logo Intro skill do?

How do I install the Logo Intro skill?

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

Is Logo Intro popular?

It lives in CJ10110425/logo-intro, which has 5 GitHub stars and 0 forks.

Related skills

Logo to Stickers

huyanxius/logo-to-stickers

Turn a logo, brand mark, or existing IP into a consistent set of playful die-cut paper stickers. Use for brand character extensions, logo personification, website sticker assets, or sticker variations that need actual transparent images; not for redesigning the logo itself.

Frontend & Design

Lean Canvas Coach

xntj-ai/lean-canvas-coach

交互式教练：用教练式提问带一位创始人/老板走完一张「精益画布」(Lean Canvas 9 格)，然后揪出那个最要命的「关键假设」，再帮他设计一个「最低成本验证」去先验它。不是做一次就完——支持每月/每周把新情况丢进来「重跑」，看关键假设变没变。三模式：interview(我访谈你→画布→关键假设→最低成本验证)、rerun(拿旧画布+新情况→重跑更新)、script(我出提问脚本你自己填)。是**会做功课的教练**——每一格你答完，我都补一手(调研核实/起草候选/先立后破地质疑/点破框架坑)，跟你共创，不把画布的活儿全压给你；不是只会问的问卷机，也不是空表让你自己填。 Use when: 用户要做商业模式分析/精益画布/lean canvas、说"帮我理一理这门生意""我这想法到底成不成""最大的风险在哪""帮我做个商业画布""访谈我出画布"、或已有画布要重跑更新。 NOT for: 写商业计划书/BP 全文、纯财务建模、个人IP定位(用 ip-canvas-coach)、写单篇文案(用 voice-dna / luo-restyle)。

Frontend & Design

Nasapunk Design

duanth/NASA-Punk-UI-SKILL

NASApunk retro-futurist frontend design system with a Starfield-inspired modern layer — NASA golden age (1960s–1980s) aesthetic evolved with Starfield's contemporary polish, for building or restyling web pages. Worn white baked-paint panels, gold Kapton insulation foil crinkle gradients, worm-style single-stroke red wordmark, Swiss grid typography (Helvetica + monospace stencil labels), technical documentation textures (rubber stamps, blueprint grids, hazard stripes, rivets, monospace spec tables, mission patches, doc-control bars) — plus Constellation-style four-color emblem stripes, soft-sha

Frontend & Design

HTML Skill Effectiveness

YardonYan/html-skill-effectiveness

Generates self-contained single-file HTML artifacts — visually polished, zero dependencies, openable straight in a browser. Covers 13 layout patterns, a 5-dimension critique system and DevLoop iteration, under 7 enforceable craft rules (anti-ai-slop, color, typography, hierarchy, animation, accessibility, laws-of-ux) plus state-coverage and form-validation contracts. Use when the user asks for a report, comparison, dashboard, slide deck or interactive explainer delivered as one HTML file. NOT for auth, payment, backend logic or real-time database scenarios — refuse and inform the user in those

Frontend & Design

Project Steward

CheshireMew/project-steward

从项目过程与结果提炼治理方法并在明确要求时自我进化；按实施计划审计完成度，研究整理仓库，预防返工，沿根因修复跨层缺陷，治理架构、目录职责、用户链、UI/UX、文档、日志、环境与发布。Use for project-history learning/evolution; audit a plan or repository; understand or organize a codebase; inspect external-tool compatibility, durable operations, and project governance. Excludes isolated function, security, dependency, CI, or monitoring-only work.

Frontend & Design

Frontend Feature Architecture

Arthurblaya/frontend-feature-architecture

Organize frontend code by feature with explicit ownership and one-way dependencies. Use when adding a frontend feature, deciding file placement, reviewing architecture, or migrating a frontend folder structure across web, mobile, and desktop projects.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.