Components

Variable Proximity

Text effect that responds to mouse proximity with variable font properties.

Variable Proximity

The VariableProximity component creates a text effect that responds to mouse proximity with variable font properties. It requires a font with variable axes (like Inter) to work properly.

Usage

Variable Proximity

Hover me! Nuxt Motion Block

<template>
  <div class="p-6 bg-gray-50 dark:bg-gray-900 rounded-lg">
    <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Variable Proximity</h3>
    <link
      rel="stylesheet"
      href="https://rsms.me/inter/inter.css"
    >
    <div
      ref="containerRef"
      class="relative"
      style="font-family: 'Inter var', 'Inter', sans-serif;"
    >
      <MVariableProximity
        label="Hover me! Nuxt Motion Block"
        class="text-4xl"
        from-font-variation-settings="'wght' 400, 'opsz' 9"
        to-font-variation-settings="'wght' 1000, 'opsz' 40"
        :radius="120"
        falloff="linear"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const containerRef = ref(null)
</script>

Props

label

string required

The text to display with proximity effects.

class

string

CSS classes to apply to each character.

fromFontVariationSettings

string

Starting font variation settings.

toFontVariationSettings

string

Ending font variation settings.

containerRef

object

Reference to the container element.

radius

number

Radius of the proximity effect in pixels.

falloff

string

Type of falloff: 'linear', 'exponential', or 'gaussian'.

Examples

Basic Variable Proximity

Proximity Effect

Interactive text that responds to cursor proximity for engaging user experiences

Hover Over Me

Move your cursor around the text to see the proximity effect in action

<template>
  <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
    <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Basic Variable Proximity</h3>
    <link
      rel="stylesheet"
      href="https://rsms.me/inter/inter.css"
    >
    <div
      ref="containerRef"
      class="relative"
      style="font-family: 'Inter var', 'Inter', sans-serif;"
    >
      <MVariableProximity
        label="Hover Text"
        class="text-3xl"
        :radius="80"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const containerRef = ref(null)
</script>

Custom Variable Proximity

Custom Proximity

<template>
  <div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
    <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white">Custom Variable Proximity</h3>
    <link
      rel="stylesheet"
      href="https://rsms.me/inter/inter.css"
    >
    <div
      ref="containerRef"
      class="relative"
      style="font-family: 'Inter var', 'Inter', sans-serif;"
    >
      <MVariableProximity
        label="Custom Proximity"
        class="text-5xl font-bold"
        from-font-variation-settings="'wght' 300, 'opsz' 12"
        to-font-variation-settings="'wght' 800, 'opsz' 36"
        :radius="150"
        falloff="linear"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const containerRef = ref(null)
</script>

Typing Text

Typing effect for text content.

Vortex

Animated particle vortex effect with customizable colors, speed, and density.