> For the complete documentation index, see [llms.txt](https://junkeh.gitbook.io/easyph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://junkeh.gitbook.io/easyph/customize/animated-placeholders.md).

# Animated Placeholders

Animated placeholders is a new way to animate with presets and animation styles

heres an example of what you can do with it

<pre class="language-yaml"><code class="lang-yaml">animations:
  welcome:
  <a data-footnote-ref href="#user-content-fn-1">  type: text</a>
  <a data-footnote-ref href="#user-content-fn-2">  frames:</a>
      - 'W'
      - 'We'
      - 'Wel'
      - 'Welc'
      - 'Welco'
      - 'Welcom'
      - 'Welcome'
      - '&#x3C;gold>Welcome'
      - '&#x3C;yellow>Welcome'
<strong>      - '&#x3C;green>Welcome'
</strong><a data-footnote-ref href="#user-content-fn-2">    speed: 2.0</a>
    playback: loop
    delay: 1.0  # Wait 1 second before starting
    pause: 0.5  # Pause 0.5 seconds between cycles

  rainbow_name:
    type: gradient_all
    rainbow: true  # Use rainbow preset colors
    output: 'Player: {start}%player_name%{end}!'
    speed: 1.0
    playback: loop

  wave_text:
    type: gradient_letters
    colors: '&#x3C;blue>,&#x3C;aqua>,&#x3C;white>'
    output: 'The {start}Ocean Waves{end} are beautiful'
    speed: 0.5
    playback: boomerang
    random: true  # Randomly shuffle colors

  pulse:
    type: gradient_center
    colors: '&#x3C;red>,&#x3C;gold>,&#x3C;yellow>'
    output: '❤ {start}Health: %player_health%{end} ❤'
    speed: 1.0
    playback: loop
    delay: 0.5  # Wait 0.5 seconds before starting

  alert:
    type: static_all
    colors: '&#x3C;red>,&#x3C;yellow>,&#x3C;gold>'
    output: '{start}⚠ Warning ⚠{end}'
    speed: 2.0
    playback: reverse  # Only plays in reverse
    random: true  # Randomly shuffle colors
    pause: 1.0  # Pause 1 second between color changes

  typing:
    type: static_letters
    colors: '&#x3C;green>,&#x3C;dark_green>'
    output: 'System: {start}Loading...{end}'
    speed: 3.0
    playback: loop

  diamond:
    type: static_center
    colors: '&#x3C;aqua>,&#x3C;blue>,&#x3C;dark_blue>'
    output: '[ {start}◇ Diamond ◇{end} ]'
    speed: 1.5
    playback: boomerang

  delayed_rainbow:
    type: gradient_all
    rainbow: true
    output: '★ {start}Special Effect{end} ★'
    speed: 1.0
    playback: loop
    delay: 2.0  # Wait 2 seconds before starting
    pause: 1.0  # Pause 1 second between cycles
</code></pre>

[^1]: Frame Based Animation

[^2]: