Template:Metallic Shine Effect: Difference between revisions

Content deleted Content added

Inline

Revision as of 14:58, 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

Shiny shiny shine

@@ Line 93: / Line 93: @@
 }
 </templatedata>
-<!-- Left to Right (default), serif font, medium glow -->
-{{Metallic Shine
+{{Metallic Shine Effect
- | text = Shiny shiny shine
+ |text=Shiny shiny shine
- | align = center
+ |align=center
+ |size=28px
- | font = var(--font-family-citizen-serif)
+ |font=var(--font-family-citizen-serif)
- | size = 28px
- | color = transparent
+ |color=#111
- | glow = yes
+ |glow=yes
- | glowcolor = #ffccff
+ |glowcolor=#ffffff
- | glowintensity = 8px
+ |glowintensity=10px
- | duration = 3s
+ |duration=1.5s
- | delay = 0s
+ |delay=0s
- | repeat = infinite
+ |repeat=infinite
 }}
-<span class="metallic-shine-text shiny-center" style="
-  font-family: 'JetBrains Mono';
+{{Metallic Shine Effect
-  font-size: 26px;
+ |text=Shiny shiny shine
-  animation-direction: reverse;
+ |align=left
-  animation-duration: 4s;
+ |size=32px
-  animation-delay: 0.5s;
+ |font=var(--font-family-citizen-base)
-  animation-iteration-count: infinite;
+ |color=#000
-  text-shadow: 0 0 5px #00e5ff, 0 0 10px #00e5ff;
+ |glow=yes
-">Shiny shiny shine</span>
+ |glowcolor=#ff69b4
-{{Metallic Shine
+ |glowintensity=12px
- | text = Shiny shiny shine
+ |duration=2.5s
- | align = right
+ |delay=0.5s
- | font = var(--font-family-citizen-monospace)
+ |repeat=infinite
- | size = 32px
- | color = transparent
- | glow = yes
- | glowcolor = #00ffff
- | glowintensity = 4px
- | duration = 1.2s
- | delay = 0s
- | repeat = infinite
 }}
-{{Metallic Shine
- | text = Shiny shiny shine
+{{Metallic Shine Effect
- | align = left
+ |text=Shiny shiny shine
- | font = 'Cinzel'
- | size = 30px
+ |align=right
+ |size=30px
- | color = transparent
+ |font='JetBrains Mono', monospace
- | glow = yes
+ |color=#002244
- | glowcolor = #ff69b4
+ |glow=yes
- | glowintensity = 10px
+ |glowcolor=#00e5ff
- | duration = 5s
+ |glowintensity=8px
- | delay = 1s
+ |duration=3s
- | repeat = infinite
+ |delay=0.2s
+ |repeat=infinite
 }}
 </noinclude>