Skip to content

Instantly share code, notes, and snippets.

@ryunp
Last active March 15, 2022 12:20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cute Typer Test</title>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<style>
body {
background-color: #222;
color: rgb(31, 189, 252);
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
font-size: 2vw;
text-shadow: 0 0 0.35vw rgb(31, 189, 252) ;
}
#app {
display: inline-block;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
function limitedRandomSignOffsetIteratorFactory (centerValue, deviationLimit) {
const minValue = centerValue - deviationLimit
const maxValue = centerValue + deviationLimit
var currentValue = centerValue
console.log(`${centerValue}, ${minValue}-${maxValue}`)
return function generateNextValue (step) {
if (Math.random() < 0.5) { step *= -1 }
currentValue = Math.min(Math.max(minValue, currentValue + step), maxValue)
return currentValue
}
}
function updateTextAnimationSpeed (typeObj, step, nextFn) {
typeObj.typeSpeed = nextFn(step)
}
// Initial app state
const typeSpeedMs = 100;
const typeSpeedStepMs = 5
const typeSpeedDeviationMs = 30
const getNextValueFn = limitedRandomSignOffsetIteratorFactory(typeSpeedMs, typeSpeedDeviationMs)
const textLineWriteDelayMs = 1500
const textLinePrefixStr = '> '
const textAnimationObj = new Typed('#app', {
backSpeed: typeSpeedMs * 0.75,
backDelay: 2000,
loop: true,
strings: [
'Tired of lying in the sunshine, staying home to watch the rain',
'You are young and life is long, and there is time to kill today',
'And then one day you find ten years have got behind you',
'No one told you when to run, you missed the starting gun'
].map(s => `${textLinePrefixStr}^${textLineWriteDelayMs}${s}`),
typeSpeed: typeSpeedMs
});
// Kick off async events
setInterval(updateTextAnimationSpeed.bind(null, textAnimationObj, typeSpeedStepMs, getNextValueFn), 1000)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment