gsuiGlitchText

gsuiGlitchText/gsuiGlitchText.css

@@ -0,0 +1,50 @@
+gsui-glitchtext {
+	position: relative;
+	color: #ccc;
+	line-height: 1em;
+	font-size: 68px;
+	font-family: "oswald", monospace;
+}
+.gsuiGlitchText-blended {
+	color: #fff;
+}
+
+/* .......................................................................... */
+.gsuiGlitchText-clip {
+	position: relative;
+}
+.gsuiGlitchText-clip + .gsuiGlitchText-clip {
+	position: absolute;
+	top: 0;
+}
+.gsuiGlitchText:not( .gsuiGlitchText-blended ) .gsuiGlitchText-clip + .gsuiGlitchText-clip {
+	display: none;
+}
+
+/* .......................................................................... */
+.gsuiGlitchText-word {
+	margin: 0;
+	white-space: nowrap;
+}
+
+/* .......................................................................... */
+.gsuiGlitchText-blend {
+	position: absolute;
+	top: 0;
+	opacity: 0;
+	transition: .1s;
+	transition-property: opacity;
+}
+.gsuiGlitchText-blendA {
+	color: #2af;
+	margin: -.03em 0 0 .03em;
+	mix-blend-mode: darken;
+}
+.gsuiGlitchText-blendB {
+	color: #f64;
+	margin: .03em 0 0 -.03em;
+	mix-blend-mode: color-burn;
+}
+.gsuiGlitchText-blended .gsuiGlitchText-blend {
+	opacity: .4;
+}

gsuiGlitchText/gsuiGlitchText.html.js

@@ -0,0 +1,15 @@
+"use strict";
+
+GSUsetTemplate( "gsui-glitchtext", () => [
+	GSUgetTemplate( "gsui-glitchtext-layer" ),
+	GSUgetTemplate( "gsui-glitchtext-layer" ),
+	GSUgetTemplate( "gsui-glitchtext-layer" ),
+] );
+
+GSUsetTemplate( "gsui-glitchtext-layer", () =>
+	GSUcreateDiv( { class: "gsuiGlitchText-clip" },
+		GSUcreateDiv( { class: "gsuiGlitchText-word" } ),
+		GSUcreateDiv( { class: "gsuiGlitchText-word gsuiGlitchText-blend gsuiGlitchText-blendA" } ),
+		GSUcreateDiv( { class: "gsuiGlitchText-word gsuiGlitchText-blend gsuiGlitchText-blendB" } ),
+	)
+);

gsuiGlitchText/gsuiGlitchText.js

@@ -0,0 +1,106 @@
+"use strict";
+
+class gsuiGlitchText extends gsui0ne {
+	#text = "";
+	#textAlt = [];
+	#frameId = null;
+	#frameBind = this.#frame.bind( this );
+	#unglitchBind = this.#unglitch.bind( this );
+
+	constructor() {
+		super( {
+			$cmpName: "gsuiGlitchText",
+			$tagName: "gsui-glitchtext",
+			$elements: {
+				$clips: "[].gsuiGlitchText-clip",
+				$words: "[].gsuiGlitchText-word",
+			},
+		} );
+		Object.seal( this );
+	}
+
+	// .........................................................................
+	static get observedAttributes() {
+		return [ "enable", "texts" ];
+	}
+	$attributeChanged( prop, val ) {
+		switch ( prop ) {
+			case "enable":
+				val === "" ? this.#on() : this.#off();
+				break;
+			case "texts": {
+				const [ text, ...alt ] = val.split( " " );
+
+				this.#text = text;
+				this.#textAlt = alt;
+			} break;
+		}
+	}
+
+	// .........................................................................
+	#on() {
+		if ( !this.firstChild.classList?.contains( "gsuiGlitchText-clip" ) ) {
+			this.firstChild.remove();
+		}
+		if ( !this.#frameId ) {
+			this.#frameBind();
+		}
+	}
+	#off() {
+		clearTimeout( this.#frameId );
+		this.#frameId = null;
+		this.#unglitchBind();
+	}
+	#frame() {
+		this.#glitch();
+		setTimeout( this.#unglitchBind, 50 + Math.random() * 200 );
+		this.#frameId = setTimeout( this.#frameBind, 250 + Math.random() * 400 );
+	}
+	#glitch() {
+		const clip1 = this.#randDouble( .2 );
+		const clip2 = this.#randDouble( .2 );
+
+		this.$elements.$clips.forEach( el => {
+			const x = this.#randDouble( .06 );
+			const y = this.#randDouble( .0 );
+
+			el.style.transform = `translate(${ x }em, ${ y }em)`;
+		} );
+		this.$elements.$clips[ 0 ].style.clipPath = `inset(0 0 ${ .6 + clip1 }em 0)`;
+		this.$elements.$clips[ 1 ].style.clipPath = `inset(${ .4 - clip1 }em 0 ${ .3 - clip2 }em 0)`;
+		this.$elements.$clips[ 2 ].style.clipPath = `inset(${ .7 + clip2 }em 0 -1em 0)`;
+		this.#textContent( this.#randText() );
+		this.classList.add( "gsuiGlitchText-blended" );
+	}
+	#unglitch() {
+		this.$elements.$clips.forEach( el => {
+			el.style.clipPath =
+			el.style.transform = "";
+		} );
+		this.#textContent( this.#text );
+		this.classList.remove( "gsuiGlitchText-blended" );
+	}
+
+	// .........................................................................
+	#randText() {
+		const txt = Array.from( this.#text );
+
+		for ( let i = 0; i < 5; ++i ) {
+			const ind = this.#randInt( this.#text.length );
+
+			txt[ ind ] = this.#textAlt[ this.#randInt( this.#textAlt.length ) ][ ind ];
+		}
+		return txt.join( "" );
+	}
+	#randDouble( d ) {
+		return Math.random() * d - d / 2;
+	}
+	#randInt( n ) {
+		return Math.random() * n | 0;
+	}
+	#textContent( txt ) {
+		this.$elements.$words.forEach( el => el.textContent = txt );
+	}
+}
+
+GSUdefineElement( "gsui-glitchtext", gsuiGlitchText );

gsuiGlitchText/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/>
+<link rel="shortcut icon" href="../assets/favicon.png"/>
+<link rel="stylesheet" href="../assets/fonts/fonts.css"/>
+
+<!-- ....................................................................... -->
+<link rel="stylesheet" href="../gsui.css"/>
+<link rel="stylesheet" href="../gsuiIcon/gsuiIcon.css"/>
+<link rel="stylesheet" href="../test-assets/test.css"/>
+
+<!-- ....................................................................... -->
+<link rel="stylesheet" href="gsuiGlitchText.css"/>
+
+<!-- ....................................................................... -->
+<style>
+body {
+	--test-content-w: 400px;
+	--test-content-h: 220px;
+}
+#testWrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>
+</head>
+<body>
+
+<!-- ....................................................................... -->
+<div id="TEST">
+	<gsui-glitchtext>GridSound</gsui-glitchtext>
+</div>
+<div id="TEST-CTRLS">
+	<label>
+		<input id="glitch-enable" type="checkbox"/>
+		<span>enable</span>
+	</label>
+</div>
+
+<!-- ....................................................................... -->
+<script src="../gs-utils/gs-utils.js"></script>
+<script src="../gs-utils/gs-utils-dom.js"></script>
+<script src="../test-assets/test.js"></script>
+<script src="../gsui0ne/gsui0ne.js"></script>
+
+<!-- ....................................................................... -->
+<script src="gsuiGlitchText.html.js"></script>
+<script src="gsuiGlitchText.js"></script>
+
+<!-- ....................................................................... -->
+<script>
+const glitch = document.querySelector( "gsui-glitchtext" );
+const inpEnable = document.querySelector( "#glitch-enable" );
+
+GSUsetAttribute( glitch, "texts", [
+	"GridSound",
+	"gRIDsOUND",
+	"&<:]$+\\#)",
+	"6/1)20^?}",
+	"9-!>5θnu]",
+].join( " " ) );
+
+inpEnable.onchange = () => GSUsetAttribute( glitch, "enable", inpEnable.checked );
+inpEnable.click();
+</script>
+</body>
+</html>

index.html

@@ -21,6 +21,7 @@
 	<a class="testLink" href="gsuiComProfile">gsuiComProfile</a>
 	<a class="testLink" href="gsuiComPlayer">gsuiComPlayer</a>
 	<a class="testLink" href="gsuiComPlaylist">gsuiComPlaylist</a>
+	<a class="testLink" href="gsuiGlitchText">gsuiGlitchText</a>
 	<a class="testLink" href="gsuiDAW">gsuiDAW</a>
 	<a class="testLink" href="gsuiTitleUser">gsuiTitleUser</a>
 	<a class="testLink" href="gsuiAnalyserHz">gsuiAnalyserHz</a>

test-assets/test.js

@@ -21,6 +21,7 @@ function lg( a ) { return console.log.apply( console, arguments ), a; }
 					GSUcreateOption( { value: "gsuiComPlayer" } ),
 					GSUcreateOption( { value: "gsuiComPlaylist" } ),
 					GSUcreateOption( { value: "" }, "--" ),
+					GSUcreateOption( { style: { backgroundColor: "#222" }, value: "gsuiGlitchText" } ),
 					GSUcreateOption( { style: { backgroundColor: "#222" }, value: "gsuiDAW" } ),
 					GSUcreateOption( { style: { backgroundColor: "#222" }, value: "gsuiWindows" } ),
 					GSUcreateOption( { style: { backgroundColor: "#222" }, value: "gsuiPopup" } ),