Marquee
Marquee
Una tira de contenido que se repite y no para de moverse. Debe ofrecer controles o una versión quieta para las personas sensibles al movimiento.
Un ejemplo real
Una página de festival mueve una lista corta de patrocinadores lentamente. Se pausa al pasar el mouse o al seleccionarla, y se convierte en una lista fija y ajustada con el movimiento reducido.
Partes principales
- 01Activador
- 02Property change
- 03Timing model
- 04Reduced-motion result
Úsalo cuando
Úselo solo para contenido corto y repetido que no sea esencial. El movimiento puede agregar ambiente, pero no debe bloquear la lectura.
No lo uses cuando
Nunca lo uses para instrucciones, texto largo, mensajes urgentes o palabras que las personas deben seguir para leer.
Nombre usado en código
overflow clip + duplicated track + prefers-reduced-motion Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Marquee (Marquee). User context: Una página de festival mueve una lista corta de patrocinadores lentamente. Se pausa al pasar el mouse o al seleccionarla, y se convierte en una lista fija y ajustada con el movimiento reducido. Design concept to apply: Marquee (Marquee). Why it fits: Úselo solo para contenido corto y repetido que no sea esencial. El movimiento puede agregar ambiente, pero no debe bloquear la lectura. Do not use it when: Nunca lo uses para instrucciones, texto largo, mensajes urgentes o palabras que las personas deben seguir para leer. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Esto no es un estándar normativo. Su nombre, límites y comportamiento esperado pueden cambiar de una fuente a otra. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Marquee (Marquee) is used now. Definition: Una tira de contenido que se repite y no para de moverse. Debe ofrecer controles o una versión quieta para las personas sensibles al movimiento. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.