+
+
{#each Array.from({ length: fps }, (_, i) => i) as i}
+
+ {#if i % (fps / 10) === 0 && i !== 0 && i !== fps / 2}
+
{(i - fps / 2) * (1000 / fps)}ms
+ {/if}
+
{/each}
@@ -48,12 +58,56 @@
.ticks {
display: flex;
- justify-content: space-between;
+ flex-wrap: wrap;
+ width: 100%;
+
+ & .spacer {
+ position: relative;
+ flex-grow: 1;
+
+ &.active {
+ background: var(--color-active);
+ z-index: 9;
+ }
+
+ & .label {
+ position: absolute;
+ top: calc(100% + 2em);
+ left: 50%;
+ transform: translateX(-50%) rotate(90deg);
+
+ line-height: 1;
+ font-size: 13px;
+ }
+ }
+
+ & .tick {
+ width: 2px;
+ height: 5vh;
+ background: white;
+ }
}
- .tick {
- width: 2px;
- height: 3vh;
- background: white;
+ .zero {
+ position: absolute;
+ top: calc(50% - 5vh * 2.5 / 2);
+ left: calc(50%);
+ width: calc(100% / var(--fps) - 1px);
+ font-size: 2vw;
+
+ & .label {
+ position: absolute;
+ top: -1.2em;
+ color: transparent;
+ }
+
+ & .mark {
+ width: 2px;
+ height: calc(5vh * 2.5);
+ background: white;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ }
}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 36174b9..368e925 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,7 +14,7 @@
Audio
-
+
AV Sync