skills.rest
happyaaa
happyaaaCOMMUNITY
Explore all skills by this author →
GitHub

text-spinner

Spin label text as a dynamic overlay anchored to a detected live head in a browser-based view using MediaPipe Tasks and run_js command with label field data.

Updated Apr 13, 2026
Search Tags:#real-time#web#mediapipe#text-overlay#spin#head-tracking
One-click install
npx skills add https://github.com/happyaaa/CampusAI --skill text-spinner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: text-spinner
Source: https://github.com/happyaaa/CampusAI/tree/main/Android/src/app/src/main/assets/skills/text-spinner
Command: npx skills add https://github.com/happyaaa/CampusAI --skill text-spinner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/vision_bundle.mjs, https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm, https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

Spin the provided label text as a dynamic overlay anchored to a detected live head in a browser-based view.

Core Features & Use Cases

  • Real-time head-tracked text overlay over live video using MediaPipe Vision Tasks.
  • Parameterized by a label value to render any text as the overlay.
  • Demonstrates 3D-like rotation and responsive text sizing based on facial landmarks in a web UI.

Quick Start

Provide the label you want spun on the head and the system will render and rotate that text over the live video feed.

Frequently Asked Questions about text-spinner

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I overlay text on a live head in a web browser?▼

To overlay text on a live head in a web browser, this Skill uses MediaPipe face landmarks to anchor and render a dynamic label over a real-time video feed.

What's the best way to add real-time head tracking to a text overlay?▼

Real-time head tracking for a text overlay is achieved using MediaPipe Vision Tasks, which detect facial landmarks in WebAssembly to dynamically position and rotate the label.

Do I need WebAssembly to run MediaPipe face landmark tracking in the browser?▼

Yes, WebAssembly is required to run MediaPipe face landmark tracking in the browser, as the vision tasks bundle depends on WASM to process real-time facial detection efficiently.

How do I display custom text over a detected face using JavaScript?▼

To display custom text over a detected face, you provide a label parameter via the run_js command, which the system then spins and anchors to the live head overlay.

Can I use head-tracked text overlays for educational web demos?▼

Yes, you can use head-tracked text overlays for interactive educational web demos, as the system renders 3D-like rotation and responsive text sizing directly on live facial landmarks.

Why does my browser-based face tracking text overlay not work?▼

A browser-based face tracking text overlay may not work if the environment lacks WebAssembly support or fails to load the MediaPipe vision bundle and face_landmarker model assets.

Related Skills

Explore More Software Engineering Skills→
damionrashforddamionrashford
15

cv-mediapipe

Run MediaPipe Vision, Audio, Text, and GenAI tasks via CLI with structured JSON output.

Community
Intermediate
kk20300113-pngkk20300113-png

videodb

Process video and audio with transcription, search, and editing via VideoDB API.

Community
Advanced
wanghaishengwanghaisheng
10

media-pipe-unity

Integrate Google's MediaPipe framework into Unity for real-time computer vision tasks.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

vr-canvas

Generate a single-file 3D-immersive portfolio website with a cylindrical mouse-interactive canvas.

Community
Advanced