---
name: seamless-marquee
description: "Create a seamless decorative track with explicit pause control. Use for marquee, CSS, loop."
---

# Бесшовная строка

Create a seamless decorative track with explicit pause control.

## Implementation decisions

1. Duplicate one equal-width group and account for its gap inside the repeated width.
2. Hide the duplicate from assistive technology.
3. Provide an explicit pause button in addition to hover pause.
4. Use linear easing for the loop and static wrapping content for reduced motion.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- The repeat boundary does not jump.
- The page has no horizontal overflow.
- Pause works without a pointing device.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/marquee

Version 2.0.0 · Original WEBCRAFT content · MIT