Skip to content

fix(skin): add subtle control transitions on touch devices #985

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sampotts wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix(skin): add subtle control transitions on touch devices #985

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0028b4
fix(skin): subtle transition on touch devices
sampotts Mar 17, 2026
7956501
fix(skin): align control and caption transitions
sampotts Mar 17, 2026
cc0970d
fix(skin): transition caption translate in tailwind
sampotts Mar 17, 2026
861fa47
fix(skin): address copilot review feedback
sampotts Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/core/src/dom/media/custom-media-element/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,10 @@ function getVideoTemplateHTML(attrs: Record<string, string>): string {
}

video::-webkit-media-text-track-container {
transition: transform var(--media-caption-track-duration, 0) ease-out;
transition: translate var(--media-caption-track-duration, 0) ease-out;
transition-delay: var(--media-caption-track-delay, 0);
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
translate: 0 var(--media-caption-track-y, 0);
scale: 0.98;
z-index: 1;
font-family: inherit;
}
Expand Down
5 changes: 3 additions & 2 deletions packages/html/src/define/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ video-player video {
}

video-player video::-webkit-media-text-track-container {
transition: transform var(--media-caption-track-duration, 0) ease-out;
transition: translate var(--media-caption-track-duration, 0) ease-out;
transition-delay: var(--media-caption-track-delay, 0);
transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
translate: 0 var(--media-caption-track-y, 0);
scale: 0.98;
z-index: 1;
font-family: inherit;
}
4 changes: 2 additions & 2 deletions packages/skins/src/default/css/components/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
color: oklch(0 0 0);
font-weight: 500;
text-align: center;
transition-property: background-color, color, outline-offset, transform;
transition-property: background-color, color, outline-offset, scale;
transition-duration: 150ms;
transition-timing-function: ease-out;
cursor: pointer;
Expand Down Expand Up @@ -58,7 +58,7 @@
}

&:active {
transform: scale(0.9);
scale: 0.9;
}

& .media-icon {
Expand Down
15 changes: 5 additions & 10 deletions packages/skins/src/default/css/components/captions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,20 @@
========================================================================== */

.media-default-skin {
--media-caption-track-duration: 150ms;
--media-caption-track-delay: 600ms;
--media-caption-track-duration: var(--media-controls-transition-duration);
--media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
--media-caption-track-y: -0.5rem;

&:has(.media-controls[data-visible]) {
--media-caption-track-delay: 25ms;
--media-caption-track-y: -3.5rem;
}

@media (prefers-reduced-motion: reduce) {
--media-caption-track-duration: 50ms;
}
}

.media-default-skin video::-webkit-media-text-track-container {
/* NOTE: The delay must account for the controls delay/duration */
transition: transform var(--media-caption-track-duration) ease-out;
transition: translate var(--media-caption-track-duration) ease-out;
transition-delay: var(--media-caption-track-delay);
transform: translateY(var(--media-caption-track-y)) scale(0.98);
translate: 0 var(--media-caption-track-y);
scale: 0.98;
z-index: 1;
font-family: inherit;
}
Expand Down
5 changes: 3 additions & 2 deletions packages/skins/src/default/css/components/error.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
border-radius: 1.75rem;
color: oklch(1 0 0);
font-size: 0.875rem;
transition-property: opacity, transform;
transition-property: opacity, scale;
transition-duration: 500ms;
transition-delay: 100ms;
transition-timing-function: linear(
Expand All @@ -46,7 +46,7 @@
.media-default-skin .media-error[data-starting-style] .media-error__dialog,
.media-default-skin .media-error[data-ending-style] .media-error__dialog {
opacity: 0;
transform: scale(0.5);
scale: 0.5;
}

.media-default-skin .media-error__content {
Expand All @@ -63,6 +63,7 @@

.media-default-skin .media-error__description {
opacity: 0.7;
word-break: break-all;
}

.media-default-skin .media-error__actions {
Expand Down
4 changes: 2 additions & 2 deletions packages/skins/src/default/css/components/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
border: 0;
color: inherit;
overflow: visible;
transition-property: transform, scale, opacity, filter;
transition-property: scale, opacity, filter;
transition-duration: 150ms;

&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: scale(0.5);
scale: 0.5;
filter: blur(8px);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/skins/src/default/css/components/preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
translate: -50% -50%;
opacity: 0;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/skins/src/default/css/components/slider.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
.media-default-skin .media-slider__thumb {
z-index: 10;
position: absolute;
transform: translate(-50%, -50%);
translate: -50% -50%;
width: 0.625rem;
height: 0.625rem;
background-color: currentColor;
Expand Down
44 changes: 33 additions & 11 deletions packages/skins/src/default/css/video.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,28 @@
--media-surface-shadow-color: oklch(0 0 0 / 0.15);
--media-surface-backdrop-filter: blur(16px) saturate(1.5);
--media-video-border-radius: var(--media-border-radius, 2rem);
--media-controls-transition-duration: 100ms;
--media-controls-transition-delay: 0ms;

@media (prefers-color-scheme: dark) {
--media-border-color: oklch(1 0 0 / 0.1);
}

&:has(.media-controls:not([data-visible])) {
/* Slight delay to hide controls on non-touch devices after interaction */
@media (pointer: fine) {
--media-controls-transition-delay: 500ms;
--media-controls-transition-duration: 300ms;

@media (prefers-reduced-motion: reduce) {
--media-controls-transition-duration: 100ms;
}
}
@media (pointer: coarse) {
--media-controls-transition-duration: 150ms;
}
}

/* Inner border ring */
&::after {
content: "";
Expand All @@ -60,41 +77,45 @@
inset-inline: 0.75rem;
z-index: 10;
color: var(--media-color-primary, oklch(1 0 0));
will-change: scale, transform, filter, opacity;
transition-timing-function: ease-out;
transition-duration: var(--media-controls-transition-duration);
transition-delay: var(--media-controls-transition-delay);
transform-origin: bottom;

@media (pointer: fine) {
transition-property: scale, transform, filter, opacity;
transition-duration: 100ms;
transition-delay: 0ms;
will-change: scale, filter, opacity;
transition-property: scale, filter, opacity;
}

@media (pointer: coarse) {
will-change: scale, opacity;
transition-property: scale, opacity;
}

&:not([data-visible]) {
opacity: 0;
pointer-events: none;
scale: 0.9;
filter: blur(8px);

@media (pointer: fine) {
transition-duration: 300ms;
transition-delay: 500ms;
filter: blur(8px);

@media (prefers-reduced-motion: reduce) {
transition-duration: 100ms;
filter: blur(0);
}
}

@media (prefers-reduced-motion: reduce) {
scale: 1;
filter: blur(0);
}
}
}

/* Hide cursor when controls are hidden in fullscreen */
.media-default-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
cursor: none;
@media (pointer: fine) {
.media-default-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
cursor: none;
}
}

/* ==========================================================================
Expand All @@ -117,6 +138,7 @@
transition-property: scale, opacity, filter;
transition-duration: 150ms;
transform-origin: bottom;
pointer-events: none;

& .media-preview__thumbnail {
max-width: 11rem;
Expand Down
2 changes: 1 addition & 1 deletion packages/skins/src/default/tailwind/components/error.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@ export const error = {
),
content: 'flex flex-col gap-2 px-2 pt-2 pb-1.5',
title: 'font-semibold leading-tight',
description: 'opacity-70',
description: 'opacity-70 break-all',
actions: 'flex gap-2 *:flex-1',
};
31 changes: 16 additions & 15 deletions packages/skins/src/default/tailwind/video.tailwind.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,21 @@ export const root = (isShadowDOM: boolean) =>
!isShadowDOM,
},
'[--media-video-border-radius:var(--media-border-radius,2rem)]',
'[--media-controls-transition-duration:100ms]',
'[--media-controls-transition-delay:0ms]',
'[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]',
'[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]',
'[@media(pointer:fine)]:motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:100ms]',
'[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]',
// Poster image
'[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]',
'[&>img]:[object-fit:var(--media-object-fit,contain)] [&>img]:[object-position:var(--media-object-position,center)] [&>img]:pointer-events-none',
'[&>img]:transition-opacity [&>img]:duration-250',
'[&>img:not([data-visible])]:opacity-0',
// Caption track CSS variables (consumed by the native caption bridge in light DOM)
'[--media-caption-track-y:-0.5rem]',
'[--media-caption-track-delay:600ms]',
'[--media-caption-track-duration:150ms]',
'motion-reduce:[--media-caption-track-duration:50ms]',
'has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]',
'[--media-caption-track-delay:calc(var(--media-controls-transition-delay)+25ms)]',
'[--media-caption-track-duration:var(--media-controls-transition-duration)]',
'has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]',
// Native caption track container
!isShadowDOM
Expand Down Expand Up @@ -88,20 +92,17 @@ export const controls = cn(
// Position
'absolute bottom-3 inset-x-3',
'[color:var(--media-color-primary,oklch(1_0_0))] z-10',
// Transitions (fine pointer only — instant toggle on touch to avoid dead-zone taps)
'will-change-[scale,transform,filter,opacity]',
'[@media(pointer:fine)]:transition-[scale,transform,filter,opacity]',
'ease-out origin-bottom',
'[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-100',
'duration-(--media-controls-transition-duration)',
'delay-(--media-controls-transition-delay)',
'[@media(pointer:fine)]:will-change-[scale,filter,opacity]',
'[@media(pointer:fine)]:transition-[scale,filter,opacity]',
'[@media(pointer:coarse)]:will-change-[scale,opacity]',
'[@media(pointer:coarse)]:transition-[scale,opacity]',
// Hidden state
'not-data-visible:pointer-events-none not-data-visible:opacity-0',
'not-data-visible:blur-sm not-data-visible:scale-90',
'[@media(pointer:fine)]:not-data-visible:delay-500',
'[@media(pointer:fine)]:not-data-visible:duration-300',
// Reduced motion + hidden
'[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100',
'motion-reduce:not-data-visible:blur-none',
'motion-reduce:not-data-visible:scale-100'
'motion-safe:not-data-visible:scale-90',
'[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm'
);

/* ==========================================================================
Expand Down
4 changes: 2 additions & 2 deletions packages/skins/src/minimal/css/components/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
font-weight: 500;
text-align: center;
text-shadow: inherit;
transition-property: background-color, color, outline-offset, transform;
transition-property: background-color, color, outline-offset, scale;
transition-duration: 150ms;
transition-timing-function: ease-out;
cursor: pointer;
Expand Down Expand Up @@ -72,7 +72,7 @@
}

&:active {
transform: scale(0.9);
scale: 0.9;
}

& .media-icon {
Expand Down
15 changes: 5 additions & 10 deletions packages/skins/src/minimal/css/components/captions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,20 @@
========================================================================== */

.media-minimal-skin {
--media-caption-track-duration: 150ms;
--media-caption-track-delay: 600ms;
--media-caption-track-duration: var(--media-controls-transition-duration);
--media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
--media-caption-track-y: -0.5rem;

&:has(.media-controls[data-visible]) {
--media-caption-track-delay: 25ms;
--media-caption-track-y: -3rem;
}

@media (prefers-reduced-motion: reduce) {
--media-caption-track-duration: 50ms;
}
}

.media-minimal-skin video::-webkit-media-text-track-container {
/* NOTE: The delay must account for the controls delay/duration */
transition: transform var(--media-caption-track-duration) ease-out;
transition: translate var(--media-caption-track-duration) ease-out;
transition-delay: var(--media-caption-track-delay);
transform: translateY(var(--media-caption-track-y)) scale(0.98);
translate: 0 var(--media-caption-track-y);
scale: 0.98;
z-index: 1;
font-family: inherit;
}
5 changes: 3 additions & 2 deletions packages/skins/src/minimal/css/components/error.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
color: oklch(1 0 0);
font-size: 0.875rem;
text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);
transition-property: opacity, transform;
transition-property: opacity, scale;
transition-duration: 500ms;
transition-delay: 100ms;
transition-timing-function: linear(
Expand All @@ -47,7 +47,7 @@
.media-minimal-skin .media-error[data-starting-style] .media-error__dialog,
.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {
opacity: 0;
transform: scale(0.5);
scale: 0.5;
}

.media-minimal-skin .media-error__content {
Expand All @@ -64,6 +64,7 @@

.media-minimal-skin .media-error__description {
opacity: 0.7;
word-break: break-all;
}

.media-minimal-skin .media-error__actions {
Expand Down
4 changes: 2 additions & 2 deletions packages/skins/src/minimal/css/components/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
border: 0;
color: inherit;
overflow: visible;
transition-property: transform, scale, opacity, filter;
transition-property: scale, opacity, filter;
transition-duration: 150ms;

&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: scale(0.5);
scale: 0.5;
filter: blur(8px);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/skins/src/minimal/css/components/preview.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
translate: -50% -50%;
opacity: 0;
}

Expand Down
Loading
Loading