Skip to content

Beautiful Hand Drawn Letters ⭐ A meticulous merger of form and function. Typography Animation Microinteraction -Star it!

License

Notifications You must be signed in to change notification settings

neodigm/vivid_vector_alphabet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vivid Vector 🦄 UX artisan ⚡ illustrator ⚡ front-end engineer

Vivid Vector Insight Clockwork Clever 🍭 Tricknology ✨ Blender Three.js 🍭 glTF UV Mapping 👁️ Vivid Vector 👁️ D3 Parallax Three.js Greensock && WebGL 🍭 👁️ D3 Parallax Three.js && WebGL && GSAP 🍭 Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector 🌑🌒🌓🌔🌕🌖🌗🌘🌑 Vivid Vector Skulduggery Vivid 🍭 glTF UV Mapping 👁️


Vivid Vector 🍭 glTF UV Mapping 👁️ Vivid Vector Skulduggery Vivid UX artisan ⚡ illustrator ⚡ front-end engineer Vivid Three.js 🚀 TypeScript 🍭 WASM ✨ Go>
<img src= Vivid Vector Three.js 🚀 TypeScript 🍭 WASM ✨ Go Vivid Vector TypeScript ⚡ WASM ✨ Vue 🪐 Vivid Vector 🌑🌒🌓🌔🌕🌖🌗🌘🌑 Vivid ✨ Cypress && JavaScript && TypeScript && Vue.js 🪐 Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery 🏄 SQL⚡ ETL MDM ⚡ PL/SQL ORM Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Vivid Vector Skulduggery Clockwork Clever 🍭 Tricknology Vivid 🌑🌒🌓🌔🌕🌖🌗🌘🌑 Skulduggery

Screen.Recording.2021-12-05.at.11.31.37.AM.mov

User Experience 🍭 Microinteractions

// Vivid Vector Interactive Type Component 🍭
let fViv =  ( ( _d, _g, sQ ) => {
	let eSect = _d.querySelector( sQ );
	let aMsg = [], eImg = {}, bRun = true;
	const BASE_URL = "https://neodigm.github.io/vivid_vector_alphabet/wasm/";
	return {
		init: ( sMsg ) => { // your
			aMsg = Array.from( sMsg.toUpperCase() ); // telephone
			for( let _i = 0; _i <= parseInt( aMsg.length / 2 ); _i++ ){ // been
				eImg = _d.createElement( "img" ); // ringin
				eImg.src = "vvspace.svg"; // while you're
				eSect.appendChild( eImg ); // dancin
			} // in the
			setInterval( fViv.tick, 200);  // rain 🌑🌒🌓🌔🌕🌖🌗🌘🌑
		},
		tick: () =>{
			if( bRun ){
				[].slice.call( _d.querySelectorAll( sQ + " img" ) ).filter( ( _e, _i ) => {
					let sC = aMsg[ _i ];
					switch( sC ){
						case " ":
							sC = "space";
						break;
						case ".":
							sC = "period";
						break;
						case ",":
							sC = "comma";
						break;
					}
					_e.src = BASE_URL + "vv" + sC.toLowerCase() + ".svg";
				});
				aMsg.push( aMsg.shift() );				
			}
		},
		stopVivid: () =>{
			bRun = false;
		},
		startVivid: () =>{
			bRun = true;
		}
	};
})( document, window, ".alpha-grd");

document.querySelector( ".alpha-grd" ).addEventListener("click", ( ev ) => {
	fViv.stopVivid();
	ev.currentTarget.classList.add("alpha-grd__hide");
});
document.querySelector( ".js-truth-bang" ).addEventListener("click", ( ev ) => {
	fViv.startVivid();
	document.querySelector( ".alpha-grd" ).classList.remove("alpha-grd__hide");
});

fViv.init("I produce interactive apps, websites, and persuasive video.");
console.log("%c Scott C. Krause ⚡ Problem Solver and Visual Storyteller", "background: #000; color: #f4dc5e; font-size: 28px");

Renaissance Man Weaponeered Poetry Clockwork Clever Tricknology Vivid 👁️ D3 Parallax Three.js Greensock && WebGL 🍭 Vivid Vector indelible bloom with the fragrance of mischief Vivid Vector Preeminent A bare-knuckle bucket of does A meticulous merger of form and function. A technically superior interior wrapped in a sophisticated exterior.
Batteries Included Best of breed 🌑🌒🌓🌔🌕🌖🌗🌘🌑 Vivid Vector Skulduggery Budapest by Blimp Clarity Versus Chaos Clever Clevorvoyant Clockwork Clevor Vivid Vector Compel
Vivid Vector Skulduggery Counter Clock Wise Design is content not garish Digital Alchemy ✨ Cypress && JavaScript && TypeScript Electrokinetic propulsion ion wind Electra Glide TypeScript ⚡ WASM ✨ NestJS safron and ginger stratagem tapestry
Inventive DataVis 👁️ UX 🍭 PWA 👁️ ThreeJS Interactive Infographic Crave Breathtaking Feasible Impossibilities TypeScript ⚡ WASM ✨ NestJS Evoked Potential TypeScript ⚡ WASM ✨ Vue.js enigmatic doppelganger vessel of quasi-religious longing 🌑🌒🌓🌔🌕🌖🌗🌘🌑 From Fad to Fundamental Houston we have an alternative


Portfolio Blog | 🌶️ Résumé | UX micro-library | PWA WASM | Web Tool Toys | Neodigm UX Wiki | NPM | Github | LinkedIn | Gists | Salesforce | Code Pen | Machvive | Arcanus 55 | Medium | W3C | InfoSec

TypeScript UX 🪐 Interactive Infographic ⚡ WASM ✨ PWA 🍭 Svelte

Interactive Infographic

Releases

No releases published

Packages

No packages published