Letter Split

Designer Agent Kit — documentation written for AI agents, readable by humans.

Splits dynamic text into one span per letter for individual character styling. Headless component — requires import.

Import

<head>
  <script
    type="application/jay-headless"
    plugin="@jay-framework/ui-kit"
    contract="letter-split"
  ></script>
</head>

Usage

<jay:letter-split text="{heroTitle}">
  <span forEach="letters" trackBy="index" class="letter">{text}</span>
</jay:letter-split>

Props: text — the string to split (bound from page ViewState)

ViewState: letters — array of { index: number, text: string } (spaces are included as entries)

Accessibility & SEO

Screen readers will spell out each letter individually. Always add aria-label with the full text and hide the spans:

<jay:letter-split text="{heroTitle}">
  <div aria-label="{heroTitle}" role="text">
    <span forEach="letters" trackBy="index" class="letter" aria-hidden="true">{text}</span>
  </div>
</jay:letter-split>

For SEO, search engines read the text content of all spans combined — no impact on indexing.

Styling examples

Rainbow text:

.letter:nth-child(7n + 1) {
  color: red;
}
.letter:nth-child(7n + 2) {
  color: orange;
}
.letter:nth-child(7n + 3) {
  color: yellow;
}
.letter:nth-child(7n + 4) {
  color: green;
}
.letter:nth-child(7n + 5) {
  color: blue;
}
.letter:nth-child(7n + 6) {
  color: indigo;
}
.letter:nth-child(7n + 7) {
  color: violet;
}

Typewriter animation:

.letter {
  display: inline-block;
  opacity: 0;
  animation: typeIn 0.05s forwards;
}
.letter:nth-child(1) {
  animation-delay: 0s;
}
.letter:nth-child(2) {
  animation-delay: 0.05s;
}
.letter:nth-child(3) {
  animation-delay: 0.1s;
}
/* scale with calc or CSS custom properties */

@keyframes typeIn {
  to {
    opacity: 1;
  }
}

Hover effect per letter:

.letter {
  display: inline-block;
  transition: transform 0.2s;
}
.letter:hover {
  transform: translateY(-4px) scale(1.2);
  color: #e91e63;
}

About this document

This page is part of the Jay Stack Agent Kit — documentation generated from the framework source and written primarily for AI agents. The language and structure are optimized for machine consumption — expect precise, specification-style prose rather than narrative documentation. Learn more about the Agent Kit →