Line Shadow Text

A text component with a moving diagonal line shadow.

Ship Fast

Edit on GitHub

Copy code

Show code

<script setup lang="ts">
import { useData } from "vitepress";
import { computed } from "vue";
import LineShadowText from "@/components/line-shadow-text/line-shadow-text.vue";

const { isDark } = useData();

const shadowColor = computed(() => (isDark.value ? "white" : "black"));
</script>

<template>
  <h1
    class="text-5xl leading-none font-semibold tracking-tighter text-balance sm:text-6xl md:text-7xl text-black dark:text-white"
  >
    Ship
    <LineShadowText class="italic" text="Fast" :shadow-color="shadowColor" />
  </h1>
</template>

Installation

Copy and paste the following code into your project:

line-shadow-text.vue

<script setup lang="ts">
import { computed } from "vue";
import { cn } from "@/lib/utils";

interface LineShadowTextProps {
  class?: string;
  text: string;
  shadowColor?: string;
  as?: keyof HTMLElementTagNameMap;
}

const props = withDefaults(defineProps<LineShadowTextProps>(), {
  shadowColor: "black",
  as: "span",
});

const style = computed(() => ({
  "--shadow-color": props.shadowColor,
}));
</script>

<template>
  <component
    :is="props.as"
    :style="style"
    :data-text="props.text"
    :class="cn('line-shadow-text relative z-0 inline-flex', props.class)"
  >
    {{ props.text }}
  </component>
</template>

<style scoped>
.line-shadow-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0.04em;
  left: 0.04em;
  z-index: -10;
  background-image: linear-gradient(
    45deg,
    transparent 45%,
    var(--shadow-color) 45%,
    var(--shadow-color) 55%,
    transparent 0
  );
  background-size: 0.06em 0.06em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: line-shadow 15s linear infinite;
}

@keyframes line-shadow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% -100%;
  }
}
</style>

If you prefer to keep the keyframes in your Tailwind config instead of a scoped <style> block, add the following animation to your tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        "line-shadow": "line-shadow 15s linear infinite",
      },
      keyframes: {
        "line-shadow": {
          "0%": { "background-position": "0 0" },
          "100%": { "background-position": "100% -100%" },
        },
      },
    },
  },
};

Usage

<script setup lang="ts">
import LineShadowText from "@/components/spark-ui/line-shadow-text/line-shadow-text.vue";
</script>

<template>
  <LineShadowText text="Fast" shadow-color="black" />
</template>

Props

Prop	Type	Default	Description
text	string	-	The text to display with shadow effect
shadowColor	string	"black"	The color of the moving line shadow
as	keyof HTMLElementTagNameMap	"span"	The HTML element to render the text as
class	string	-	Additional classes to merge onto the tag