Template:Metallic Shine Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 14:53, April 16, 2025

Applies an animated metallic shine effect to inline text with options for glow color, intensity, size, font, color, duration, delay, and repeat.

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Text	`text`	no description Default Shiny Text	String	optional
Text Alignment	`align`	left, center, or right Default center	String	optional
Font Size	`size`	Font size (e.g. 24px) Default 24px	String	optional
Font Family	`font`	Font to use for the text Default var(--font-family-citizen-serif)	String	optional
Text Color	`color`	Color of the base text (transparent recommended for full shine) Default transparent	String	optional
Glow Effect	`glow`	yes or no Default yes	String	optional
Glow Color	`glowcolor`	Color of the glow if enabled Default #cccccc	String	optional
Glow Intensity	`glowintensity`	How strong the glow appears (e.g. 4px, 10px) Default 6px	String	optional
Animation Duration	`duration`	Time for one full shine cycle Default 2s	String	optional
Animation Delay	`delay`	Delay before the shine animation starts Default 0s	String	optional
Repeat Count	`repeat`	Number of times the animation should repeat (e.g. 1, infinite) Default infinite	String	optional

Template:Metallic Shine Shiny shiny shine Template:Metallic Shine Template:Metallic Shine

@@ Line 1: / Line 1: @@
 <includeonly>
-<templatestyles src="Metallic Shine Effect/styles.css" />
+<templatestyles src="Metallic Shine/styles.css" />
 <span
   class="metallic-shine-text shiny-{{{align|center}}}"
@@ Line 10: / Line 10: @@
     animation-delay: {{{delay|0s}}};
     animation-iteration-count: {{{repeat|infinite}}};
-    {{#ifeq: {{{glow|yes}}}|yes|text-shadow: 0 0 6px {{{glowcolor|white}}}, 0 0 12px {{{glowcolor|#ccc}}};|text-shadow: none;}}
+    {{#ifeq: {{{glow|yes}}}|yes|
+      text-shadow:
+0 {{{glowintensity|6px}}} {{{glowcolor|#ffffff}}},
+0 calc({{{glowintensity|6px}}} * 2) {{{glowcolor|#cccccc}}};
+      |text-shadow: none;}}
   "
 >{{{text|Shiny Text}}}</span>
@@ Line 57: / Line 61: @@
       "label": "Glow Color",
       "type": "string",
-      "default": "#ccc",
+      "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": {
@@ Line 79: / Line 89: @@
     }
   },
-  "description": "Applies an animated metallic shine effect to inline text with optional glow, font, size, color, alignment, duration, delay, and repeat settings.",
+  "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>