<canvas id="canvas"></canvas>
<div id="titles"></div>
<script type="x-shader/x-vertex">#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
in vec2 position;
void main(void) {
gl_Position = vec4(position, 0, 1);
}
</script>
<script type="x-shader/x-fragment">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 fragColor;
uniform vec2 resolution;
uniform float time;
uniform float fade;
#define T time
#define S smoothstep
#define TAU 6.2831853
float rnd(vec2 p) {
return fract(sin(dot(p, p.yx + vec2(1234, 2345))) * 345678.);
}
vec3 grid(vec2 uv) {
vec3 col = vec3(0);
float n = 1.2;
vec2 g = abs(mod(uv, n) - .5 * n);
col = mix(vec3(1), vec3(0), S(.08, .0, min(g.x, g.y)));
col = min(col, mix(vec3(1), vec3(0), .125));
return col;
}
void main(void) {
vec2 uv = (
gl_FragCoord.xy - .5 * resolution
) / min(resolution.x, resolution.y);
uv *= 48.7;
vec3 col = grid(uv);
float
d = length(vec2(log(length(uv)) - T * .5, atan(abs(uv.y), abs(uv.y)) / TAU));
d = sin(d * dot(col, col)) - .05;
d = abs(d);
d = pow(.3 / d, .75);
d = max(.0, d * mix(.75, 1., rnd(uv)));
col *= mix(d, 1., 1. - min(1., S(.7, .8, T * .4)));
col = mix(col, vec3(.01, .05, .052), .75);
col = mix(col, vec3(1), S(.9, 1., fade * fade));
col = mix(col, vec3(0), 1. - min(1., S(.5, .8, T * .4)));
fragColor = vec4(col, 1);
}
</script>
<script type="x-shader/x-fragment">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 fragColor;
uniform vec2 resolution;
uniform float time;
uniform float fade;
#define T time
#define S smoothstep
float rnd(vec2 p) {
return fract(sin(dot(p, p.yx + vec2(1234, 2345))) * 345678.);
}
vec3 hue(float a) {
return vec3(0) + step(a, .5);
}
vec3 grid(vec2 uv) {
vec3 col = vec3(0);
uv *= 98.7;
float n = 1.2;
vec2 g = abs(mod(uv, n) - .5 * n),
id = floor(uv / n + .5);
col = mix(vec3(1), vec3(0), S(.08, .0, min(g.x, g.y)));
col = min(
col,
mix(
vec3(1),
hue(
rnd(
vec2(
log(length(id * 100.)) - floor(10. * fract(T * 2.5)),
atan(id.y, id.x)
)
)
),
.65
)
);
return col * mix(.5, 1., rnd(id));
}
void main(void) {
vec2 uv = (
gl_FragCoord.xy - .5 * resolution
) / min(resolution.x, resolution.y);
vec3 col = grid(uv);
col = mix(col, vec3(.01, .05, .052) * 4., .125);
col = mix(col, vec3(1), S(.9, 1., fade * fade));
col = mix(col, vec3(1), 1. - min(1., S(.0, 1., T * .8)));
fragColor = vec4(col, 1);
}
</script>
<script type="x-shader/x-fragment">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 fragColor;
uniform vec2 resolution;
uniform float time;
uniform float fade;
#define T time
#define S smoothstep
float rnd(vec2 p) {
return fract(sin(dot(p, p.yx + vec2(1234, 2345))) * 345678.);
}
vec3 grid(vec2 uv) {
vec2 p = uv;
vec3 col = vec3(0);
uv *= 28.7;
float n = 1.2,
distort = mix(.5, 1., rnd(p));
vec2 g = abs(mod(uv, n) - .5 * n),
id = floor(uv / n + .5);
col = mix(vec3(1), vec3(0), S(.08 * distort, .0, min(g.x, g.y)));
return col;
}
void main(void) {
vec2 uv = (
gl_FragCoord.xy - .5 * resolution
) / min(resolution.x, resolution.y);
vec3 col = grid(uv);
col = mix(col, vec3(0), S(.9, 1., fade * fade));
col = mix(col, vec3(1), 1. - min(1., S(.0, .5, T * .4)));
fragColor = vec4(col, 1);
}
</script>@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap");
body {
margin: 0;
display: grid;
align-items: center;
justify-content: center;
overflow: hidden;
}
canvas {
width: 100%;
height: auto;
object-fit: contain;
}
body > * {
grid-column: 1/-1;
grid-row: 1/-1;
}
div {
display: grid;
place-content: center;
height: 100dvh;
overflow: hidden;
}
div > * {
grid-row: 1/-1;
grid-column: 1/-1;
display: block;
text-align: center;
font: 900 10vmin/1.2 "Orbitron", system-ui;
color: white;
letter-spacing: 5;
text-transform: uppercase;
translate: 0;
scale: 1;
opacity: 0;
animation: grow 4s cubic-bezier(1, 0, .8, 1);
animation-delay: 500ms;
}
span.zoom {
font-size: 100vmin;
}
span.slide {
position: relative;
isolation: isolate;
animation: glow 3.5s linear;
animation-delay: 250ms;
}
span.slide::after {
content: attr(data-text);
position: absolute;
inset: 0;
text-stroke: 0.2em #000;
z-index: -1;
}
span.paper {
--color: #000;
--tr-start: 0 800px;
color: var(--color);
translate: 0;
scale: 2;
opacity: 0;
filter: drop-shadow(2px 2px 2px var(--color)) invert(0.2);
animation: appear 1.5s cubic-bezier(0.9, 0, 0.77, 1.18);
animation-delay: 300ms;
}
span.paper:nth-of-type(even) {
--tr-start: -1400px 0;
--color: #f33;
}
@keyframes appear {
0% {
translate: var(--tr-start);
opacity: 0;
}
5% {
opacity: 0;
}
15% {
opacity: 1;
}
20% {
translate: 0;
opacity: 1;
}
50% {
opacity: 1;
}
80% {
translate: 0;
opacity: 0.1;
}
85% {
translate: 400px 0;
}
90% {
opacity: 0;
}
95% {
translate: 400px 0;
opacity: 0;
}
100% {
translate: 400px 0;
}
}
@keyframes glow {
0% {
scale: 0.125;
translate: 800px 0;
opacity: 0;
}
5% {
opacity: 1;
}
10% {
translate: 0;
opacity: 1;
}
95% {
scale: 4;
opacity: 0;
}
100% {
scale: 4;
opacity: 0;
}
}
@keyframes grow {
0% {
scale: .0125;
opacity: 0;
}
36% {
opacity: 1;
}
95% {
opacity: 0;
}
100% {
scale: 3;
opacity: 0;
letter-spacing: 2em;
}
}
/*********
* made by Matthias Hurrle (@atzedent)
*/
const dpr = window.devicePixelRatio
function compile(shader, source) {
gl.shaderSource(shader, source)
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader))
}
}
let gl, programs = [],
vertices, buffer;
function setup() {
gl = canvas.getContext("webgl2")
const vs = gl.createShader(gl.VERTEX_SHADER)
const vertexSource = document.querySelector('script[type="x-shader/x-vertex"]').innerText
compile(vs, vertexSource)
shaders = Array.from(document.querySelectorAll('script[type="x-shader/x-fragment"]')).map(e => e.innerText)
programs = shaders.map(() => gl.createProgram())
for (let i = 0; i < shaders.length; i++) {
let addr = gl.createShader(gl.FRAGMENT_SHADER)
let program = programs[i]
compile(addr, shaders[i])
gl.attachShader(program, vs)
gl.attachShader(program, addr)
gl.linkProgram(program)
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(program))
}
}
vertices = [
-1.,-1.,1.,
-1.,-1.,1.,
-1., 1.,1.,
-1., 1.,1.,
]
buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
for (let program of programs) {
const position = gl.getAttribLocation(program, "position")
gl.enableVertexAttribArray(position)
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)
// uniforms come here...
program.resolution = gl.getUniformLocation(program, "resolution")
program.time = gl.getUniformLocation(program, "time")
program.fade = gl.getUniformLocation(program, "fade")
}
}
function dispose() {
if (gl) {
const ext = gl.getExtension("WEBGL_lose_context")
if (ext) ext.loseContext()
gl = null
}
}
function draw(now, program, duration) {
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.useProgram(program)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
// uniforms come here...
gl.uniform2f(program.resolution, canvas.width, canvas.height)
gl.uniform1f(program.time, now * 1e-3)
gl.uniform1f(program.fade, fade)
gl.drawArrays(gl.TRIANGLES, 0, vertices.length * .5)
}
const styleList = ["zoom", "slide", "paper"]
const wordlist = [
["Welcome", "To", "BenMcCall", "Profile", "", "A", "Freelancer", "With", ""],
["deepen", "knowledge", "And Sharpen", "skills", "In", ""],
["Figma", "Design", "Code", "And Programming", "✌"]
]
let handle, offset = 0,
iter = 0,
duration = 2500,
words = wordlist[iter % wordlist.length],
wordIndex = 0,
then = 0,
done = false,
fade = 0
function loop(now) {
now = now - offset
fade = speak(now)
draw(now, programs[iter % programs.length], fade)
if (fade >= 1) {
offset += now
fade = 0,
then = 0,
done = false,
wordIndex = 0,
words = wordlist[++iter % wordlist.length]
}
handle = requestAnimationFrame(loop)
}
function init() {
dispose()
setup()
resize()
loop(0)
}
function resize() {
const {
innerWidth: width,
innerHeight: height
} = window
canvas.width = width * dpr
canvas.height = height * dpr
gl.viewport(0, 0, width * dpr, height * dpr)
}
function speak(now) {
let timeout = duration,
factor = 250,
prog = iter % programs.length
if (prog === 2) {
timeout = 1000
factor = 500
}
if (!done && (now - then) >= timeout) {
done = now / (timeout * words.length) >= 1
then = now
if (wordIndex === 0) {
titles.innerHTML = ""
}
const word = words[wordIndex++ % words.length]
const span = document.createElement("span")
span.classList.add(styleList[iter % styleList.length])
span.dataset.text = word
span.innerText = word
titles.appendChild(span)
}
fade = now / ((timeout + factor) * words.length)
return fade
}
window.onload = init
window.onresize = resize
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.