diff --git a/ui/vuetifyx/vuetifyxjs/src/lib/TiltedImages/VXTiltedImages.vue b/ui/vuetifyx/vuetifyxjs/src/lib/TiltedImages/VXTiltedImages.vue
new file mode 100644
index 00000000..d4edca6e
--- /dev/null
+++ b/ui/vuetifyx/vuetifyxjs/src/lib/TiltedImages/VXTiltedImages.vue
@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="vx-tilted-images"
+    @mousemove="handleMouseMove"
+    @mouseleave="handleMouseLeave"
+    ref="container"
+    :style="containerStyle"
+  >
+    <div class="vx-tilted-images__content" :style="contentStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  initialRotateX: {
+    type: Number,
+    default: 0
+  },
+  initialRotateY: {
+    type: Number,
+    default: 0
+  },
+  initialTranslateX: {
+    type: Number,
+    default: 0
+  },
+  initialTranslateY: {
+    type: Number,
+    default: 0
+  }
+})
+
+const container = ref<HTMLElement | null>(null)
+const rotateX = ref(props.initialRotateX)
+const rotateY = ref(props.initialRotateY)
+const translateX = ref(props.initialTranslateX)
+const translateY = ref(props.initialTranslateY)
+
+const containerStyle = {
+  perspective: '1000px',
+  overflow: 'visible',
+  padding: '50px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+}
+
+const contentStyle = computed(() => {
+  return {
+    position: 'relative' as const,
+    display: 'grid',
+    justifyItems: 'center',
+    alignItems: 'center',
+    transformOrigin: 'center center',
+    transformStyle: 'preserve-3d' as const,
+    transform: `translateX(${translateX.value}px) translateY(${translateY.value}px) rotateX(${rotateX.value}deg) rotateY(${rotateY.value}deg)`,
+    transition: 'transform 0.1s ease-out'
+  }
+})
+
+const handleMouseMove = (e: MouseEvent) => {
+  if (!container.value) return
+
+  const rect = container.value.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const y = e.clientY - rect.top
+
+  const centerX = rect.width / 2
+  const centerY = rect.height / 2
+
+  const percentX = (x - centerX) / centerX
+  const percentY = (y - centerY) / centerY
+
+  // Adjust rotation based on mouse position relative to center
+  // Max rotation change +/- 10 degrees
+  rotateY.value = props.initialRotateY + percentX * 10
+  rotateX.value = props.initialRotateX - percentY * 10 // Invert Y axis for natural feel
+}
+
+const handleMouseLeave = () => {
+  // Reset to initial values
+  rotateX.value = props.initialRotateX
+  rotateY.value = props.initialRotateY
+  translateX.value = props.initialTranslateX
+  translateY.value = props.initialTranslateY
+}
+</script>
+
+<style lang="scss" scoped>
+.vx-tilted-images {
+  width: 100%;
+}
+
+.vx-tilted-images__content {
+  :deep(*) {
+    grid-area: 1 / 1;
+  }
+
+  @for $i from 1 through 10 {
+    :deep(*:nth-child(#{$i})) {
+      transform: translateZ(#{$i * 20}px);
+    }
+  }
+}
+</style>
diff --git a/ui/vuetifyx/vuetifyxjs/src/lib/Timeline/VXTimeline.vue b/ui/vuetifyx/vuetifyxjs/src/lib/Timeline/VXTimeline.vue
new file mode 100644
index 00000000..27da6eba
--- /dev/null
+++ b/ui/vuetifyx/vuetifyxjs/src/lib/Timeline/VXTimeline.vue
@@ -0,0 +1,231 @@
+<template>
+  <div
+    ref="root"
+    class="vx-timeline-wrap"
+    :class="{
+      'vx-timeline-sinuous': sinuous,
+      'vx-timeline-animate': animateOnScroll,
+      'vx-timeline-parallax': parallax
+    }"
+    v-bind="rootAttrs"
+  >
+    <v-timeline v-bind="combinedProps">
+      <template v-if="!isDefaultSlotReallyEmpty" #default>
+        <slot />
+      </template>
+    </v-timeline>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  defineEmits,
+  computed,
+  useSlots,
+  defineOptions,
+  onMounted,
+  onUnmounted,
+  ref,
+  nextTick
+} from 'vue'
+import { useFilteredAttrs } from '@/lib/composables/useFilteredAttrs'
+
+const { filteredAttrs, rootAttrs } = useFilteredAttrs()
+const slots = useSlots()
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+  sinuous: Boolean,
+  animateOnScroll: Boolean,
+  parallax: Boolean
+})
+
+const root = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+let parallaxRafId: number | null = null
+let parallaxScheduled = false
+const animationTimeouts = new Map<Element, number>()
+
+// Previously handleParallax re-armed itself with requestAnimationFrame on
+// every frame, which meant 60 fps worth of querySelectorAll +
+// getBoundingClientRect + inline style writes for the life of the page.
+// Combined with any hover-triggered layout (Vuetify adjusting a card
+// elevation, the pagebuilder editor's overlay, etc.) the browser would
+// stall or crash on mouse over. Drive it off scroll instead: one rAF per
+// scroll event, coalesced so fast scrolls don't queue work.
+const handleParallax = () => {
+  parallaxRafId = null
+  parallaxScheduled = false
+  if (!root.value) return
+
+  const opposites = root.value.querySelectorAll('.v-timeline-item__opposite')
+  const bodies = root.value.querySelectorAll('.v-timeline-item__body')
+  const windowHeight = window.innerHeight
+  const center = windowHeight / 2
+
+  const applyParallax = (el: Element, factor: number) => {
+    // If animateOnScroll is enabled, only apply parallax if the element is visible
+    if (props.animateOnScroll && !el.classList.contains('is-visible')) {
+      return
+    }
+
+    const rect = el.getBoundingClientRect()
+    const elCenter = rect.top + rect.height / 2
+    const dist = elCenter - center
+    const offset = dist * factor
+    ;(el as HTMLElement).style.transform = `translateY(${offset}px)`
+  }
+
+  opposites.forEach((el) => applyParallax(el, 0.1))
+  bodies.forEach((el) => applyParallax(el, -0.02))
+}
+
+const scheduleParallax = () => {
+  if (parallaxScheduled) return
+  parallaxScheduled = true
+  parallaxRafId = requestAnimationFrame(handleParallax)
+}
+
+onMounted(() => {
+  if (props.animateOnScroll && root.value) {
+    observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('is-visible')
+
+            const existingId = animationTimeouts.get(entry.target)
+            if (existingId) {
+              clearTimeout(existingId)
+              animationTimeouts.delete(entry.target)
+            }
+
+            // Disable transform transition after animation completes to allow crisp parallax
+            const id = window.setTimeout(() => {
+              entry.target.classList.add('animation-done')
+              animationTimeouts.delete(entry.target)
+            }, 600)
+            animationTimeouts.set(entry.target, id)
+          } else {
+            entry.target.classList.remove('is-visible')
+            entry.target.classList.remove('animation-done')
+
+            const existingId = animationTimeouts.get(entry.target)
+            if (existingId) {
+              clearTimeout(existingId)
+              animationTimeouts.delete(entry.target)
+            }
+          }
+        })
+      },
+      {
+        threshold: 0
+      }
+    )
+
+    // Wait for layout to settle
+    setTimeout(() => {
+      if (root.value) {
+        // Observe the body and opposite elements instead of the item itself,
+        // because v-timeline-item might be display: contents
+        const items = root.value.querySelectorAll(
+          '.v-timeline-item__body, .v-timeline-item__opposite'
+        )
+        items.forEach((item) => {
+          observer?.observe(item)
+        })
+      }
+    }, 1000)
+  }
+
+  if (props.parallax) {
+    // Initial paint + bind to scroll/resize. Passive listeners so we
+    // never block scrolling.
+    scheduleParallax()
+    window.addEventListener('scroll', scheduleParallax, { passive: true })
+    window.addEventListener('resize', scheduleParallax, { passive: true })
+  }
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+  if (parallaxRafId !== null) {
+    cancelAnimationFrame(parallaxRafId)
+  }
+  if (props.parallax) {
+    window.removeEventListener('scroll', scheduleParallax)
+    window.removeEventListener('resize', scheduleParallax)
+  }
+  animationTimeouts.forEach((id) => clearTimeout(id))
+  animationTimeouts.clear()
+})
+
+const defaultOptions = computed(() => {
+  return {
+    // Default options if any
+  }
+})
+
+const isDefaultSlotReallyEmpty = computed(() => {
+  /* @ts-ignore */
+  return !slots.default || !slots.default().length
+})
+
+// bugfix: bind event will auto bind to rootElement, and result in trigger twice
+defineOptions({
+  inheritAttrs: false
+})
+
+const combinedProps = computed(() => ({
+  ...defaultOptions.value,
+  ...filteredAttrs.value // passthrough the props that defined by vuetify
+}))
+</script>
+
+<style lang="scss" scoped>
+.vx-timeline-wrap {
+  &.vx-timeline-animate {
+    :deep(.v-timeline-item__body),
+    :deep(.v-timeline-item__opposite) {
+      opacity: 0;
+      transform: translateY(20px);
+      transition:
+        opacity 0.6s ease-out,
+        transform 0.6s ease-out;
+
+      &.is-visible {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      &.animation-done {
+        transition: opacity 0.6s ease-out !important;
+      }
+    }
+  }
+
+  &.vx-timeline-parallax {
+    :deep(.v-timeline-item__opposite) {
+      align-self: center;
+    }
+  }
+
+  &.vx-timeline-sinuous {
+    :deep(.v-timeline-divider__before),
+    :deep(.v-timeline-divider__after) {
+      background-color: transparent !important;
+      width: 20px;
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='100' viewBox='0 0 12 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0 Q 12 25 6 50 T 6 100' fill='none' stroke='%23ccc' stroke-width='2'/%3E%3C/svg%3E");
+      background-repeat: repeat-y;
+      background-size: 12px 100px;
+    }
+
+    :deep(.v-timeline-divider__before) {
+      background-position: bottom center;
+    }
+
+    :deep(.v-timeline-divider__after) {
+      background-position: top center;
+    }
+  }
+}
+</style>
diff --git a/ui/vuetifyx/vuetifyxjs/src/lib/VXImageGallery.vue b/ui/vuetifyx/vuetifyxjs/src/lib/VXImageGallery.vue
new file mode 100644
index 00000000..44173ff5
--- /dev/null
+++ b/ui/vuetifyx/vuetifyxjs/src/lib/VXImageGallery.vue
@@ -0,0 +1,43 @@
+<template>
+  <v-sheet class="mx-auto" elevation="0" max-width="100%">
+    <v-slide-group v-model="model" class="pa-4" show-arrows>
+      <v-slide-group-item v-for="(item, i) in items" :key="i" v-slot="{ isSelected, toggle }">
+        <v-card
+          :color="isSelected ? 'primary' : 'grey-lighten-1'"
+          class="ma-4"
+          :height="height"
+          :width="width || 300"
+          @click="toggle"
+        >
+          <div class="d-flex fill-height align-center justify-center">
+            <v-img :src="item.src" :lazy-src="item.lazySrc" cover height="100%" width="100%">
+              <template v-slot:placeholder>
+                <div class="d-flex align-center justify-center fill-height">
+                  <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
+                </div>
+              </template>
+            </v-img>
+          </div>
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface GalleryItem {
+  src: string
+  lazySrc?: string
+  title?: string
+}
+
+const props = defineProps<{
+  items: GalleryItem[]
+  height?: number | string
+  width?: number | string
+}>()
+
+const model = ref(null)
+</script>
diff --git a/ui/vuetifyx/vuetifyxjs/src/lib/VXVideo.vue b/ui/vuetifyx/vuetifyxjs/src/lib/VXVideo.vue
new file mode 100644
index 00000000..ab99edaa
--- /dev/null
+++ b/ui/vuetifyx/vuetifyxjs/src/lib/VXVideo.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch, useAttrs, computed } from 'vue'
+import Hls from 'hls.js'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  poster: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: '100%'
+  },
+  height: {
+    type: [String, Number],
+    default: 'auto'
+  },
+  rounded: {
+    type: [String, Boolean],
+    default: false
+  }
+})
+
+const attrs = useAttrs()
+const containerClass = computed(() => {
+  const classes: Record<string, boolean> = {
+    rounded: props.rounded === true || props.rounded === '',
+    [`rounded-${props.rounded}`]: typeof props.rounded === 'string' && props.rounded !== ''
+  }
+
+  const cls = attrs.class
+  if (typeof cls === 'string' && cls.includes('rounded-xl')) {
+    classes['rounded-xl'] = true
+  }
+  return classes
+})
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+let hls: Hls | null = null
+
+const initVideo = () => {
+  const video = videoRef.value
+  if (!video) return
+  if (!props.src) return
+
+  if (hls) {
+    hls.destroy()
+    hls = null
+  }
+
+  // 1. Check if browser supports HLS natively (Safari)
+  if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = props.src
+  }
+  // 2. If not, use Hls.js library (Chrome, Firefox, etc.)
+  else if (Hls.isSupported()) {
+    hls = new Hls({
+      xhrSetup: function (xhr, url) {
+        xhr.withCredentials = true // Crucial: Sends cookies with the request
+      }
+    })
+    hls.loadSource(props.src)
+    hls.attachMedia(video)
+  }
+}
+
+onMounted(() => {
+  initVideo()
+})
+
+watch(
+  () => props.src,
+  () => {
+    initVideo()
+  }
+)
+
+onBeforeUnmount(() => {
+  if (hls) {
+    hls.destroy()
+    hls = null
+  }
+})
+
+const showOverlay = ref(true)
+
+const playVideo = () => {
+  const video = videoRef.value
+  if (!video) return
+  video.play()
+  showOverlay.value = false
+}
+
+const onPlay = () => {
+  showOverlay.value = false
+}
+
+const onPause = () => {
+  // Optional: check if we want to show overlay again on pause
+  // showOverlay.value = true
+}
+
+// Watch poster prop to reset overlay if poster changes
+watch(
+  () => props.poster,
+  () => {
+    showOverlay.value = true
+  }
+)
+</script>
+
+<template>
+  <div class="vx-video-container" :style="{ width: width, height: height }" :class="containerClass">
+    <video
+      ref="videoRef"
+      v-bind="$attrs"
+      class="vx-video-element"
+      :poster="poster"
+      @play="onPlay"
+      @pause="onPause"
+    ></video>
+
+    <div
+      v-if="showOverlay"
+      class="vx-video-overlay"
+      :style="{ backgroundImage: `url(${poster})` }"
+      @click="playVideo"
+    >
+      <div class="vx-video-play-button">
+        <svg viewBox="0 0 24 24" width="64" height="64" class="play-icon">
+          <path fill="currentColor" d="M8 5v14l11-7z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vx-video-container {
+  position: relative;
+  overflow: hidden;
+  background-color: #000;
+}
+
+.vx-video-element {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.vx-video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.vx-video-play-button {
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  padding: 16px;
+  transition:
+    transform 0.2s,
+    background-color 0.2s;
+  color: white;
+  display: flex;
+}
+
+.vx-video-overlay:hover .vx-video-play-button {
+  transform: scale(1.1);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+</style>
diff --git a/ui/vuetifyx/vuetifyxjs/src/lib/plugins/index.ts b/ui/vuetifyx/vuetifyxjs/src/lib/plugins/index.ts
index 20f2c053..b9419a81 100644
--- a/ui/vuetifyx/vuetifyxjs/src/lib/plugins/index.ts
+++ b/ui/vuetifyx/vuetifyxjs/src/lib/plugins/index.ts
@@ -44,6 +44,10 @@ import LinkageSelectRemote from '@/lib/LinkageSelectRemote/index.vue'
 import VXSegmentForm from '@/lib/Form/VXSegmentForm/index.vue'
 import VXModelProxy from '@/lib/VXModelProxy.vue'
 import VXChart from '@/lib/Chart/VXChart.vue'
+import VXTimeline from '@/lib/Timeline/VXTimeline.vue'
+import VXTiltedImages from '@/lib/TiltedImages/VXTiltedImages.vue'
+import VXImageGallery from '@/lib/VXImageGallery.vue'
+import VXVideo from '@/lib/VXVideo.vue'
 
 declare const window: any
 
@@ -85,6 +89,10 @@ const vuetifyx = {
     app.component('vx-segment-form', VXSegmentForm)
     app.component('vx-iframe-emitter', VXIframeEmitter)
     app.component('vx-model-proxy', VXModelProxy)
+    app.component('vx-timeline', VXTimeline)
+    app.component('vx-tilted-images', VXTiltedImages)
+    app.component('vx-image-gallery', VXImageGallery)
+    app.component('vx-video', VXVideo)
   }
 }
 
diff --git a/ui/vuetifyx/vx-image-gallery.go b/ui/vuetifyx/vx-image-gallery.go
new file mode 100644
index 00000000..42b9b907
--- /dev/null
+++ b/ui/vuetifyx/vx-image-gallery.go
@@ -0,0 +1,47 @@
+package vuetifyx
+
+import (
+	"context"
+
+	h "github.com/theplant/htmlgo"
+)
+
+type VXImageGalleryBuilder struct {
+	tag *h.HTMLTagBuilder
+}
+
+func VXImageGallery() (r *VXImageGalleryBuilder) {
+	r = &VXImageGalleryBuilder{
+		tag: h.Tag("vx-image-gallery"),
+	}
+	return
+}
+
+func (b *VXImageGalleryBuilder) Items(v interface{}) (r *VXImageGalleryBuilder) {
+	b.tag.Attr(":items", v)
+	return b
+}
+
+func (b *VXImageGalleryBuilder) Height(v interface{}) (r *VXImageGalleryBuilder) {
+	b.tag.Attr(":height", v)
+	return b
+}
+
+func (b *VXImageGalleryBuilder) Width(v interface{}) (r *VXImageGalleryBuilder) {
+	b.tag.Attr(":width", v)
+	return b
+}
+
+func (b *VXImageGalleryBuilder) Attr(vs ...interface{}) (r *VXImageGalleryBuilder) {
+	b.tag.Attr(vs...)
+	return b
+}
+
+func (b *VXImageGalleryBuilder) Class(names ...string) (r *VXImageGalleryBuilder) {
+	b.tag.Class(names...)
+	return b
+}
+
+func (b *VXImageGalleryBuilder) MarshalHTML(ctx context.Context) (r []byte, err error) {
+	return b.tag.MarshalHTML(ctx)
+}
diff --git a/ui/vuetifyx/vx-tilted-images.go b/ui/vuetifyx/vx-tilted-images.go
new file mode 100644
index 00000000..8df9740f
--- /dev/null
+++ b/ui/vuetifyx/vx-tilted-images.go
@@ -0,0 +1,73 @@
+package vuetifyx
+
+import (
+	"context"
+	"fmt"
+
+	h "github.com/theplant/htmlgo"
+)
+
+type VXTiltedImagesBuilder struct {
+	tag *h.HTMLTagBuilder
+}
+
+func VXTiltedImages(children ...h.HTMLComponent) (r *VXTiltedImagesBuilder) {
+	r = &VXTiltedImagesBuilder{
+		tag: h.Tag("vx-tilted-images").Children(children...),
+	}
+	return
+}
+
+func (b *VXTiltedImagesBuilder) InitialRotateX(v float64) (r *VXTiltedImagesBuilder) {
+	b.tag.Attr(":initial-rotate-x", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) InitialRotateY(v float64) (r *VXTiltedImagesBuilder) {
+	b.tag.Attr(":initial-rotate-y", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) InitialTranslateX(v float64) (r *VXTiltedImagesBuilder) {
+	b.tag.Attr(":initial-translate-x", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) InitialTranslateY(v float64) (r *VXTiltedImagesBuilder) {
+	b.tag.Attr(":initial-translate-y", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) Attr(vs ...interface{}) (r *VXTiltedImagesBuilder) {
+	b.tag.Attr(vs...)
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) Class(names ...string) (r *VXTiltedImagesBuilder) {
+	b.tag.Class(names...)
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) Style(v string) (r *VXTiltedImagesBuilder) {
+	b.tag.Style(v)
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) Children(children ...h.HTMLComponent) (r *VXTiltedImagesBuilder) {
+	b.tag.Children(children...)
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) AppendChildren(children ...h.HTMLComponent) (r *VXTiltedImagesBuilder) {
+	b.tag.AppendChildren(children...)
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) PrependChildren(children ...h.HTMLComponent) (r *VXTiltedImagesBuilder) {
+	b.tag.PrependChildren(children...)
+	return b
+}
+
+func (b *VXTiltedImagesBuilder) MarshalHTML(ctx context.Context) (r []byte, err error) {
+	return b.tag.MarshalHTML(ctx)
+}
diff --git a/ui/vuetifyx/vx-timeline.go b/ui/vuetifyx/vx-timeline.go
new file mode 100644
index 00000000..7237285b
--- /dev/null
+++ b/ui/vuetifyx/vx-timeline.go
@@ -0,0 +1,162 @@
+package vuetifyx
+
+import (
+	"context"
+	"fmt"
+
+	h "github.com/theplant/htmlgo"
+)
+
+type VXTimelineBuilder struct {
+	tag *h.HTMLTagBuilder
+}
+
+func VXTimeline(children ...h.HTMLComponent) (r *VXTimelineBuilder) {
+	r = &VXTimelineBuilder{
+		tag: h.Tag("vx-timeline").Children(children...),
+	}
+	return
+}
+
+func (b *VXTimelineBuilder) Justify(v string) (r *VXTimelineBuilder) {
+	b.tag.Attr("justify", v)
+	return b
+}
+
+func (b *VXTimelineBuilder) LineThickness(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":line-thickness", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) LineColor(v string) (r *VXTimelineBuilder) {
+	b.tag.Attr("line-color", v)
+	return b
+}
+
+func (b *VXTimelineBuilder) DotColor(v string) (r *VXTimelineBuilder) {
+	b.tag.Attr("dot-color", v)
+	return b
+}
+
+func (b *VXTimelineBuilder) FillDot(v bool) (r *VXTimelineBuilder) {
+	b.tag.Attr(":fill-dot", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) HideOpposite(v bool) (r *VXTimelineBuilder) {
+	b.tag.Attr(":hide-opposite", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) AnimateOnScroll(v bool) (r *VXTimelineBuilder) {
+	b.tag.Attr(":animate-on-scroll", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) Parallax(v bool) (r *VXTimelineBuilder) {
+	b.tag.Attr(":parallax", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) IconColor(v string) (r *VXTimelineBuilder) {
+	b.tag.Attr("icon-color", v)
+	return b
+}
+
+func (b *VXTimelineBuilder) LineInset(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":line-inset", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) Size(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":size", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) Tag(v string) (r *VXTimelineBuilder) {
+	b.tag.Attr("tag", v)
+	return b
+}
+
+func (b *VXTimelineBuilder) Density(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":density", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) Theme(v string) (r *VXTimelineBuilder) {
+	b.tag.Attr("theme", v)
+	return b
+}
+
+func (b *VXTimelineBuilder) Align(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":align", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) Direction(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":direction", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) Side(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":side", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) TruncateLine(v interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(":truncate-line", h.JSONString(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) SetAttr(k string, v interface{}) {
+	b.tag.SetAttr(k, v)
+}
+
+func (b *VXTimelineBuilder) Attr(vs ...interface{}) (r *VXTimelineBuilder) {
+	b.tag.Attr(vs...)
+	return b
+}
+
+func (b *VXTimelineBuilder) Children(children ...h.HTMLComponent) (r *VXTimelineBuilder) {
+	b.tag.Children(children...)
+	return b
+}
+
+func (b *VXTimelineBuilder) AppendChildren(children ...h.HTMLComponent) (r *VXTimelineBuilder) {
+	b.tag.AppendChildren(children...)
+	return b
+}
+
+func (b *VXTimelineBuilder) PrependChildren(children ...h.HTMLComponent) (r *VXTimelineBuilder) {
+	b.tag.PrependChildren(children...)
+	return b
+}
+
+func (b *VXTimelineBuilder) Class(names ...string) (r *VXTimelineBuilder) {
+	b.tag.Class(names...)
+	return b
+}
+
+func (b *VXTimelineBuilder) ClassIf(name string, add bool) (r *VXTimelineBuilder) {
+	b.tag.ClassIf(name, add)
+	return b
+}
+
+func (b *VXTimelineBuilder) Sinuous(v bool) (r *VXTimelineBuilder) {
+	b.tag.Attr(":sinuous", fmt.Sprint(v))
+	return b
+}
+
+func (b *VXTimelineBuilder) On(name string, value string) (r *VXTimelineBuilder) {
+	b.tag.Attr(fmt.Sprintf("v-on:%s", name), value)
+	return b
+}
+
+func (b *VXTimelineBuilder) Bind(name string, value string) (r *VXTimelineBuilder) {
+	b.tag.Attr(fmt.Sprintf("v-bind:%s", name), value)
+	return b
+}
+
+func (b *VXTimelineBuilder) MarshalHTML(ctx context.Context) (r []byte, err error) {
+	return b.tag.MarshalHTML(ctx)
+}
diff --git a/ui/vuetifyx/vx-video.go b/ui/vuetifyx/vx-video.go
new file mode 100644
index 00000000..8b677810
--- /dev/null
+++ b/ui/vuetifyx/vx-video.go
@@ -0,0 +1,62 @@
+package vuetifyx
+
+import (
+	"context"
+
+	h "github.com/theplant/htmlgo"
+)
+
+type VXVideoBuilder struct {
+	tag *h.HTMLTagBuilder
+}
+
+func VXVideo() (r *VXVideoBuilder) {
+	r = &VXVideoBuilder{
+		tag: h.Tag("vx-video"),
+	}
+	return
+}
+
+func (b *VXVideoBuilder) Src(v string) (r *VXVideoBuilder) {
+	b.tag.Attr("src", v)
+	return b
+}
+
+func (b *VXVideoBuilder) Poster(v string) (r *VXVideoBuilder) {
+	b.tag.Attr("poster", v)
+	return b
+}
+
+func (b *VXVideoBuilder) Width(v string) (r *VXVideoBuilder) {
+	b.tag.Attr("width", v)
+	return b
+}
+
+func (b *VXVideoBuilder) Height(v string) (r *VXVideoBuilder) {
+	b.tag.Attr("height", v)
+	return b
+}
+
+func (b *VXVideoBuilder) Rounded(v string) (r *VXVideoBuilder) {
+	b.tag.Attr("rounded", v)
+	return b
+}
+
+func (b *VXVideoBuilder) Class(names ...string) (r *VXVideoBuilder) {
+	b.tag.Class(names...)
+	return b
+}
+
+func (b *VXVideoBuilder) ClassIf(name string, add bool) (r *VXVideoBuilder) {
+	b.tag.ClassIf(name, add)
+	return b
+}
+
+func (b *VXVideoBuilder) Attr(vs ...interface{}) (r *VXVideoBuilder) {
+	b.tag.Attr(vs...)
+	return b
+}
+
+func (b *VXVideoBuilder) MarshalHTML(ctx context.Context) (r []byte, err error) {
+	return b.tag.MarshalHTML(ctx)
+}