View source for Template:Metallic Shine Effect

<includeonly>
<templatestyles src="Metallic Shine/styles.css" />
<span
  class="metallic-shine-text shiny-{{{align|center}}}"
  style="
    font-size: {{{size|24px}}};
    font-family: {{{font|var(--font-family-citizen-serif)}}};
    color: {{{color|transparent}}};
    animation-duration: {{{duration|2s}}};
    animation-delay: {{{delay|0s}}};
    animation-iteration-count: {{{repeat|infinite}}};
    {{#ifeq: {{{glow|yes}}}|yes|
      text-shadow:
        0 0 {{{glowintensity|6px}}} {{{glowcolor|#ffffff}}},
        0 0 calc({{{glowintensity|6px}}} * 2) {{{glowcolor|#cccccc}}};
      |text-shadow: none;}}
  "
>{{{text|Shiny Text}}}</span>
</includeonly>

<noinclude>
<templatedata>
{
  "params": {
    "text": {
      "label": "Text",
      "type": "string",
      "default": "Shiny Text"
    },
    "align": {
      "label": "Text Alignment",
      "type": "string",
      "default": "center",
      "description": "left, center, or right"
    },
    "size": {
      "label": "Font Size",
      "type": "string",
      "default": "24px",
      "description": "Font size (e.g. 24px)"
    },
    "font": {
      "label": "Font Family",
      "type": "string",
      "default": "var(--font-family-citizen-serif)",
      "description": "Font to use for the text"
    },
    "color": {
      "label": "Text Color",
      "type": "string",
      "default": "transparent",
      "description": "Color of the base text (transparent recommended for full shine)"
    },
    "glow": {
      "label": "Glow Effect",
      "type": "string",
      "default": "yes",
      "description": "yes or no"
    },
    "glowcolor": {
      "label": "Glow Color",
      "type": "string",
      "default": "#cccccc",
      "description": "Color of the glow if enabled"
    },
    "glowintensity": {
      "label": "Glow Intensity",
      "type": "string",
      "default": "6px",
      "description": "How strong the glow appears (e.g. 4px, 10px)"
    },
    "duration": {
      "label": "Animation Duration",
      "type": "string",
      "default": "2s",
      "description": "Time for one full shine cycle"
    },
    "delay": {
      "label": "Animation Delay",
      "type": "string",
      "default": "0s",
      "description": "Delay before the shine animation starts"
    },
    "repeat": {
      "label": "Repeat Count",
      "type": "string",
      "default": "infinite",
      "description": "Number of times the animation should repeat (e.g. 1, infinite)"
    }
  },
  "description": "Applies an animated metallic shine effect to inline text with options for glow color, intensity, size, font, color, duration, delay, and repeat.",
  "format": "inline"
}
</templatedata>
<!-- Left to Right (default), serif font, medium glow -->
{{Metallic Shine
 | text = Shiny shiny shine
 | align = center
 | font = var(--font-family-citizen-serif)
 | size = 28px
 | color = transparent
 | glow = yes
 | glowcolor = #ffccff
 | glowintensity = 8px
 | duration = 3s
 | delay = 0s
 | repeat = infinite
}}
<span class="metallic-shine-text shiny-center" style="
  font-family: 'JetBrains Mono';
  font-size: 26px;
  animation-direction: reverse;
  animation-duration: 4s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  text-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff;
">Shiny shiny shine</span>
{{Metallic Shine
 | text = Shiny shiny shine
 | align = right
 | font = var(--font-family-citizen-monospace)
 | size = 32px
 | color = transparent
 | glow = yes
 | glowcolor = #00ffff
 | glowintensity = 4px
 | duration = 1.2s
 | delay = 0s
 | repeat = infinite
}}
{{Metallic Shine
 | text = Shiny shiny shine
 | align = left
 | font = 'Cinzel'
 | size = 30px
 | color = transparent
 | glow = yes
 | glowcolor = #ff69b4
 | glowintensity = 10px
 | duration = 5s
 | delay = 1s
 | repeat = infinite
}}
</noinclude>