diff options
| author | skal <pascal.massimino@gmail.com> | 2026-02-05 21:31:37 +0100 |
|---|---|---|
| committer | skal <pascal.massimino@gmail.com> | 2026-02-05 21:31:37 +0100 |
| commit | 73b3e19f46a138c89562357d23082c85fd2c0bf3 (patch) | |
| tree | 8742f186a8ddff3cefcd86d5af01015011589ccc /tools/editor/sdf.js | |
| parent | 386c184a848815928657c4da83aa821b8b08f5d8 (diff) | |
feat(timeline-editor): Add hoverable sequence name overlay with fade effect
UX improvement:
- Sequence name now displays as large centered overlay (24px bold)
- Strong text shadow for readability over effect stack
- Fades out smoothly when mouse enters sequence box (0.3s transition)
- Fades back in when mouse leaves sequence box
- Small info text (time, priority) stays in top-left corner
Visual hierarchy:
- Default: Large sequence name visible, dominates the view
- On hover: Name fades away, effects become clearly visible
- Smooth 300ms opacity transition for polished feel
CSS implementation:
- .sequence-name: Centered absolutely, z-index 10, pointer-events none
- .sequence.hovered .sequence-name: opacity 0
- .sequence-info: Small text in corner, always visible
- Multi-layer text shadow for high contrast
JavaScript:
- mouseenter: Add 'hovered' class to trigger fade out
- mouseleave: Remove 'hovered' class to restore name
- Supports custom sequence names from demo.seq file
Diffstat (limited to 'tools/editor/sdf.js')
0 files changed, 0 insertions, 0 deletions
