sticker-target-video

Community@rain/sticker-target-video
Community skill — not reviewed. It was shared by caramel pudding and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: sticker-target-video. Run `npx -y @neta-art/neta-search-cli@latest skills use @rain/sticker-target-video --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @rain/sticker-target-video
Summary

Turn a character video into a touch game: drag stickers onto glowing spots and hear them react.

  • Makes a vertical, phone-shaped video scene where the character loops on screen and five glowing spots appear on their body.
  • Drag a sticker from the bottom tray onto a spot: it sticks, the character speaks a voice line, and an affection bar rises by 20.
  • A wrong drop just springs the sticker back with no penalty. After all five are placed, a completion screen appears with a replay button.
  • Includes typed dialogue with a smaller narration line, a music toggle, and a saved daily state, so coming back shows the finished scene.
  • Works best with a short video of a character with a striking look, plus your own sticker art and voice lines if you have them.
SKILL.md
# Sticker target video

A video of the character loops underneath. Round targets glow on the body; the viewer drags a sticker from the dock
onto one. A correct drop sticks, plays that target's line, and moves the affection bar. Five targets, five lines, one
finished scene.

Everything is calibrated to the source video's frame, so the whole game is data, not hard-coded positions.

## What the user gets

A published web Work: idle and speaking video layers, a target layer, a sticker dock, an affection bar, dialogue with
narration, a completion screen, and a music toggle.

## Inputs — and when to ask

| Item | Required | Counts as given when | Default |
|---|---|---|---|
| Idle video (loop, muted) | yes | Attached or a path is given | Ask once, stop |
| Speaking video (same framing) | no | Given | Reuse idle with a subtle zoom while a line plays |
| Target list: name, x/y, size | yes (conceptually) | The user names body spots | Five neutral spots you place on the face, neck, shoulder, chest, hand |
| Sticker art | no | Files given | Simple coloured stamps generated in CSS |
| Voice lines + audio | no | Text or audio given | Typed lines, 60–100 ms per character |

Ask once for the video. Targets can be placed by you on the first frame and then adjusted by the user.

## Calibration (source of truth: 1080 × 1920)

All positions are percentages of the source frame, **not** of the displayed element. Store:

```json
{ "id": 1, "target": "cheek", "x": 44.3, "y": 34.1, "size": 11, "maxW": 0.09,
  "sticker": "stickers/01.webp", "audio": "audio/01.mp3", "duration": 2.69,
  "dialogue": "…", "narration": "…" }
```

- `size` is the target ring's diameter in **% of frame width** (9–16 works on a body).
- The sticker is drawn at `size × 1.4`, capped by `maxW × frameWidth`, so it never covers the face.
- `duration` is the real audio length; if missing, fall back to `0.35 × characterCount + 900` ms.

Convert to screen space with one function:
`left = x/100 × stageWidth`, `top = y/100 × stageHeight`, and scale by `stageWidth / 1080`.

## Build order

1. **Frame the stage.** 9:16, filled. Video `object-fit: cover`; bias the crop so the head is never cut. Put every
   layer in the same box so percentages stay honest.
2. **Target layer.** For each target, a ring at its position with a soft pulse (scale 1 → 1.08, 1.6 s). Rings are
   pointer targets with a hit radius of at least 44 CSS px, even when visually smaller.
3. **Dock.** Horizontal strip of stickers at the bottom, each draggable. On drag, show a ghost at 0.9 opacity that
   follows the finger; on release, hit-test against rings with a generous radius.
4. **Correct drop.** Snap the sticker to the ring, pop it (0.2 → 1.15 → 1 in 320 ms), hide the ring, switch to the
   speaking video for the line's duration, type the dialogue and show the narration in a smaller line. On line end,
   return to idle and re-arm the dock.
5. **Wrong drop.** Let the sticker spring back to the dock (280 ms), no penalty, no negative sound. Do not count a
   miss.
6. **Affection.** Start 0, **+20 per target** (five targets → 100). Animate the fill height with a 400 ms ease and a
   single 180 ms scale "beat" at each gain. Show the number as a percentage.
7. **Finish.** When every target is placed, fade in a completion plate ("today's stickers are done") and a small
   replay. Keep a per-day flag in localStorage so returning shows the finished state, with a reset control.
8. **Audio.** One `AudioContext` or `<audio>` pool: BGM at 0.5, ducked to 0.15 while a voice plays, restored over
   0.5 s. Never overlap lines; stop the previous source.
9. **Publish** with `neta work init web`, then `neta work publish web`.

## Fallbacks

- No speaking video: keep idle and add a 1.02 zoom while the line plays.
- No audio: type the line at 60–100 ms per character and hold the pose for `max(2200, chars × 80)` ms.
- Autoplay blocked: start everything from the first pointer-down; the music button reflects the true state.
- Portrait screen: cap the stage width at `viewportHeight × 9 / 16` and centre it; do not stretch the crop.

## Gotchas

- Do not position targets relative to the video element's rendered box if the video is letterboxed; use the same
  cover-cropped stage box for video and layers, or the rings drift on different aspect ratios.
- `pointerdown` + `setPointerCapture` for the drag; `touchmove` alone loses the gesture when the finger leaves the
  sticker.
- Preload both videos and all audio before play; a line that starts 300 ms late breaks the timing.
- The rings must remain tappable as well as draggable — some viewers tap the spot first.

## Verify

`node scripts/verify.mjs <work-dir>` checks: entry, no remote assets, the target array with x/y/size, the 20-point
step, the idle/speaking video pair, the audio ducking, and the completion state.

Then place all five, place one wrong on purpose, reload mid-way, and finish. Report what you exercised.

## Deliver

Publish the Work, put its card on the Board, and hand it over with an interaction-components card whose target is the
Work — the id comes from the publish output.

## Out of scope

No world-setting changes, no deleting files, no hidden tracking of the viewer, no real dating-app framing — keep it a
scene the user owns.

## Language

Reply in the user's language, whatever language this file is in — every message, the final handover included. Dialogue,
narration, buttons and the completion plate follow the user's language; store the lines as data so a translation never
requires touching the layout.
Related skills
dreamcore-palace-3dCommunityTurn your idea of a floating Chinese palace into a 3D world your audience can explore, in any weather.diy-candy-gift-bagCommunityTurn your character into a 3D candy gift bag you dress up step by step and share as a web page.capsule-gacha-machineCommunityTurn your prize art into a capsule-toy machine that people can shake, open and collect.desktop-pet-companionCommunityTurn your character into a little desktop companion that reacts to taps, greets you, and shares memories as you bond.