Timeline
Build a video editor timeline with sticky clip labels.
Petal-Captions.srt
A quiet bloom begins
Soft Blossom Preset
Spring light across the frame
Blossom-Mark.png
Founder Portrait...
Petal Matte
Scene - Garden...
Bloom - Close...
Bloom Grade
Scene - Greenhouse
Bloom_Roll_01.mp4
Scene - Maker Interview
Petals_CU_03.MP4
Stem_Pan_01.MP4
Dewdrop...
Sprout...
Vine_Tilt.MP4
Petal_Drift.MP4
Leaf...
Bloom_CO...
Morning Intro.mp3
Whisper...
Greenhouse_VO.WAV
Bee...
Petal_Foley.WAV
Rustle...
Garden_Ambience.WAV
Dusk Outro.mp3
blossom_warm_strings_loop.WAV
blossom_soft_strings_calm_loop.WAV
.tracks {
display: grid;
width: max-content;
gap: 0.125rem;
}
.track {
display: flex;
height: 3rem;
gap: 0.125rem;
padding-inline: 3rem;
}
.clip {
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
}
.clip-label {
position: sticky;
left: 0.5rem;
right: 0.5rem;
width: fit-content;
}
<BlossomCarousel>
<div class="tracks">
<div class="track">
<div class="clip" style="width: 180px">
<p class="clip-label">A quiet bloom begins</p>
</div>
<div class="clip" style="width: 530px; margin-left: 92px">
<p class="clip-label">Soft Blossom Preset</p>
</div>
...
</div>
<div class="track">
...
</div>
...
</div>
</BlossomCarousel>
.html
<BlossomCarousel>
<div class="grid! w-max gap-0.5">
<div class="flex h-12 gap-0.5 px-12">
<div class="flex! px-2 py-1 h-full bg-primary/40 rounded-lg" style="width: 180px">
<p class="sticky left-2 right-2 truncate">A quiet bloom begins</p>
</div>
<div class="flex! px-2 py-1 h-full bg-primary/40 rounded-lg" style="width: 530px; margin-left: 92px">
<p class="sticky left-2 right-2 truncate">Soft Blossom Preset</p>
</div>
...
</div>
<div class="flex h-12 gap-0.5 px-12">
...
</div>
...
</div>
</BlossomCarousel>