404 error text effect with animated waves effects. developed using HTML, CSS and threejs framework.
Author zapo tek
Created SEPTEMBER 11, 2018
License Open
Compatible browsers Chrome, Firefox, Safari
HTML Snippet
`<div id="container"> <div class="bottom-right"> <a id="signature" href="https://www.shadertoy.com/user/balkhan/sort=popular&from=0&num=8"> _ </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.js"></script> <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 u_resolution; uniform float u_time; uniform sampler2D sam; void main() { t = u_time*.125; vec3 col = vec3(0., 0., 0.); // if (mod(float(gl_FragCoord.x), 30.) <= 1. || mod(float(gl_FragCoord.y), 30.) <= 1.) // discard; vec2 R = u_resolution.xy; float aspect = max(R.x/R.y, 1.*R.y/R.x); // R *= aspect; vec2 uv = vec2(gl_FragCoord.xy-R/2.) / R.xy; vec2 tcd = vec2(gl_FragCoord.xy) / R.xy; //uv *= aspect; vec3 dir = camera(uv*4.); vec3 pos = vec3(.0, .0, 0.0); pos.z = 44.5; h*=0.; vec2 inter = (march(pos, dir)); // col.xyz = 1.-ret_col*(1.-inter.x*.0125); col += h * 1.; col = max( col, texture2D(sam, tcd-vec2(.021,.0)).xyz*.0); gl_FragColor = vec4(col,1.0); } float mylength(vec3 p) {return max(abs(p.x), max(abs(p.y), abs(p.z)));} float mylength(vec2 p) {return max(abs(p.x), abs(p.y));} float sdCapsule( vec3 p, vec3 a, vec3 b, float r ) { vec3 pa = p-a, ba = b-a; float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 ); return length( pa - ba*h ) - r; } float four_df(vec3 p, vec3 off) { p -= off; vec3 pp = p; // rotate(pp.xz, pp.y*.5+u_time*1.); // pp.xz = modA(pp.xz, 5.); pp.x -= 1.; float ret = sdCapsule(pp, vec3(.0, 10.*1.5, .0), vec3(.0, -10.*1.5, .0), .25 ); pp = p; rotate(pp.xy, 1.57); pp.z = abs(pp.z)-clamp(exp(-pp.y+0.), .0, 1.); ret = min(ret, sdCapsule(pp-vec3(min(exp(-pp.y+5.), 1.)*2.1*sin(pp.y*.5+u_time), .0, .0), vec3(.0, 10.*1.5, .0), vec3(.0, -7.*1.5, 0.0), .25) ); pp = p; rotate(pp.xy, 1.57*1.5); pp.x -= 6.5*1.5+1.; ret = min(ret, sdCapsule(pp, vec3(.0, 7.*1.5, .0), vec3(.0, -6.*1.5, 0.0), .25) ); return ret; } float scene(vec3 p) { float var; float mind = 1e5; var = atan(p.x,p.y); vec2 q = vec2( ( length(p.xy) )-10.,p.z); rotate(q, var*2.-u_time*.50); q = abs(q)-2.; rotate(q, var*4.+u_time*1.); q.y = abs(q.y)-.8; rotate(q, var*4.+u_time*1.); q.x = abs(q.x)-.8; ret_col = 1.-vec3(.350, .2, .3); mind = mylength(q)+.5+1.05*(length(fract(q*.125*(3.+3.*sin(var*2. - u_time*.250)) )-.5)-1.215); float the_4 = four_df(vec3((abs(p.x))*(p.x<0.0 ? -1. : 1.)+(p.x<0.0 ? 1. : -1.)*35.,p.yz), vec3(.0, .0, .0)); h += vec3(.725, .4, .5)*.0125/(.125021+.0051*mind*mind); mind = min(mind, the_4); h += -vec3(.5, .4, .5)*.0025/(.021+mind*mind); h += vec3(.31, .21, .25)*.00125/(.005+.000151*the_4*the_4); //mind = abs(mind)+.0051; return (mind); } vec2 march(vec3 pos, vec3 dir) { vec2 dist = vec2(0.0, 0.0); vec3 p = vec3(0.0, 0.0, 0.0); vec2 s = vec2(0.0, 0.0); pos.z += -10.; for (float i = -1.; i < I_MAX; ++i) { p = pos + dir * dist.y; dist.x = scene(p)*.7; dist.y += dist.x; // log trick by aiekick if (log(dist.y*dist.y/dist.x/1e5) > .0 || dist.x < E || dist.y > FAR) { break; } s.x++; } s.y = dist.y; return (s); } // Utilities void rotate(inout vec2 v, float angle) { v = vec2(cos(angle)*v.x+sin(angle)*v.y,-sin(angle)*v.x+cos(angle)*v.y); } vec3 camera(vec2 uv) { float fov = 1.; vec3 forw = vec3(0.0, 0.0, -1.0); vec3 right = vec3(1.0, 0.0, 0.0); vec3 up = vec3(0.0, 1.0, 0.0); return (normalize((uv.x) * right + (uv.y) * up + fov * forw)); } </script> </div>`CSS Code
`body { background-color: #000000; } .bottom-right { position: absolute; bottom: 20%; right: 10%; } #signature { font-family: "Times New Roman", Times, serif; font-size: 35px; } #container { width: 100%; height: 100%; }`JavaScript Snippet
` var container; var camera, scene, renderer; var uniforms; init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); uniforms = { sam: {type: "t", value: new THREE.TextureLoader().load( "https://fr.cdn.v5.futura-sciences.com/buildsv6/images/wide1920/f/5/0/f50159600a_100519_plus-belle-image-science-2016.jpg" )}, u_time: { type: "f", value: 1.0 }, u_resolution: { type: "v2", value: new THREE.Vector2() }, u_mouse: { type: "v2", value: new THREE.Vector2() } }; var material = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: document.getElementById( 'vertexShader' ).textContent, fragmentShader: document.getElementById( 'fragmentShader' ).textContent } ); var mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); container.appendChild( renderer.domElement ); onWindowResize(); window.addEventListener( 'resize', onWindowResize, false ); document.onmousemove = function(e){ uniforms.u_mouse.value.x = e.pageX uniforms.u_mouse.value.y = e.pageY } } function onWindowResize( event ) { renderer.setSize( window.innerWidth, window.innerHeight ); uniforms.u_resolution.value.x = renderer.domElement.width; uniforms.u_resolution.value.y = renderer.domElement.height; } function animate() { requestAnimationFrame( animate ); render(); } function render() { uniforms.u_time.value += 0.05; renderer.render( scene, camera ); }`Preview
