<script setup lang="tsx">
/** @jsxImportSource vue */
import { Ticker, useItemOffset } from 'motion-plus-vue'
import { motion, useTransform } from 'motion-v'
import { defineComponent } from 'vue'

const Face = defineComponent({
  setup() {
    const offset = useItemOffset()
    const rotate = useTransform(offset, [0, 300], [0, 360], { clamp: false })

    return () => (
      <motion.div class="item" style={{ rotate }}>
        😂
      </motion.div>
    )
  },
})
</script>

<template>
  <Ticker class="ticker">
    <Face />
  </Ticker>
</template>

<style scoped>
.ticker {
  width: 100%;
}
.item {
  font-size: 42px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>