{"id":5470,"date":"2026-01-20T08:29:30","date_gmt":"2026-01-20T08:29:30","guid":{"rendered":"https:\/\/icon-era.com\/statistics\/?p=5470"},"modified":"2026-09-14T16:43:41","modified_gmt":"2026-09-14T16:43:41","slug":"google-matrix-easter-egg","status":"publish","type":"post","link":"https:\/\/icon-era.com\/statistics\/google-matrix-easter-egg\/","title":{"rendered":"Google Matrix Easter Egg"},"content":{"rendered":"\n<div id=\"ie-matrix\">\n<div class=\"board\"><\/div>\n<div class=\"readout\"><span>Rate: <b id=\"mx-rate\">1.0<\/b>x<\/span><span>Grid: <b id=\"mx-grid\">0<\/b> cells<\/span><span>Decay: <b id=\"mx-dec\">0.90<\/b><\/span><\/div>\n<div class=\"row\">\n<button class=\"tap\" id=\"mx-rate-btn\">Speed up<\/button>\n<button class=\"tap\" id=\"mx-dec-btn\">Longer glow<\/button>\n<button class=\"tap\" id=\"mx-flip\">Dark mode<\/button>\n<button class=\"tap pale\" id=\"mx-reset\">Reset<\/button>\n<\/div>\n\n<h2>It is a grid, not a set of columns<\/h2>\n<p>Every cell on the screen holds a character and a brightness value. Heads run down the columns lighting cells as they pass, and everything else fades on its own timer. Turn the decay up and the trails stretch into proper rain. Turn it down and you get sparse falling dots.<\/p>\n<p>Because each cell fades independently, nothing ever repeats in step, which is why it holds attention longer than it should.<\/p>\n\n<h2>What the characters are<\/h2>\n<p>Digits, katakana, and the six letters of the logo dropped in among them. The word surfaces every few seconds, usually broken across two columns, occasionally whole and upright, and once you have noticed it you cannot stop looking for it.<\/p>\n<p>The film used mirrored katakana, which is why the shapes look nearly readable and never quite resolve.<\/p>\n\n<h2>No official version exists<\/h2>\n<p>Falling code has been a coding exercise since 1999. It became a search page takeover once browsers could draw fast enough to keep up, so matrix google, google matrix and google matrix 3d all point at rebuilds. The 3D ones add perspective to the same columns and not much else.<\/p>\n<p>Nothing here reacts to the page underneath, which is the difference between this and something like <a href=\"https:\/\/icon-era.com\/statistics\/google-gravity\/\">google gravity<\/a>. The other page that throws the layout away completely is <a href=\"https:\/\/icon-era.com\/statistics\/google-terminal\/\">google terminal<\/a>, and unlike this one it answers back.<\/p>\n<\/div>\n<style>\n#ie-matrix{--blue:#1558d6;--blue2:#4c86f0;--blue3:#a9c4f5;--deep:#0b3aa0;--slate:#5b6675;--mist:#98a2b3;--rule:#dde3ec;--wash:#f2f6fd;font-family:ui-sans-serif,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;color:#1a2230;line-height:1.66;margin:0 auto}\n#ie-matrix h2{font-size:25px;line-height:1.3;margin:32px 0 10px;color:var(--deep);letter-spacing:-.2px}\n#ie-matrix h3{font-size:16.5px;margin:20px 0 5px;color:#1a2230}\n#ie-matrix p{margin:0 0 14px}\n#ie-matrix ul,#ie-matrix ol{margin:0 0 15px 20px}\n#ie-matrix li{margin:6px 0}\n#ie-matrix a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}\n#ie-matrix a:hover{color:var(--deep)}\n#ie-matrix .board{position:relative;width:100%;height:min(70vh,600px);min-height:420px;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 10px 26px rgba(21,88,214,.1);touch-action:none}\n#ie-matrix .board canvas{position:absolute;left:0;top:0;width:100%;height:100%;outline:0}\n#ie-matrix .readout{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:12px 0 0;font:600 13px ui-sans-serif,\"Segoe UI\",Arial;color:var(--slate)}\n#ie-matrix .readout b{color:var(--deep);font-size:15px}\n#ie-matrix .row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:12px 0 20px}\n#ie-matrix .tap{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:12px 20px;font:700 14px ui-sans-serif,\"Segoe UI\",Arial;cursor:pointer;box-shadow:0 4px 12px rgba(21,88,214,.25)}\n#ie-matrix .tap:hover{background:var(--deep)}\n#ie-matrix .tap:active{transform:translateY(1px)}\n#ie-matrix .tap.pale{background:#fff;color:var(--blue);border:1px solid var(--blue3);box-shadow:none}\n#ie-matrix .tap.pale:hover{background:var(--wash)}\n#ie-matrix .stick{display:grid;grid-template-columns:repeat(3,54px);gap:7px;justify-content:center;margin-top:10px}\n#ie-matrix .stick button{background:#fff;border:1px solid var(--blue3);color:var(--blue);border-radius:8px;height:46px;font:700 17px ui-sans-serif,Arial;cursor:pointer}\n#ie-matrix .stick button:hover{background:var(--wash)}\n#ie-matrix .stick .gap{visibility:hidden;border:0}\n#ie-matrix .curtain{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.93);text-align:center;font:700 20px\/1.45 ui-sans-serif,\"Segoe UI\",Arial;color:var(--deep);cursor:pointer;z-index:4;padding:18px}\n#ie-matrix .curtain em{display:block;font-style:normal;font-weight:500;font-size:13.5px;color:var(--slate);margin-top:5px}\n#ie-matrix .typein{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}\n#ie-matrix .typein input{border:1px solid var(--blue3);border-radius:8px;padding:11px 13px;font:600 14px ui-sans-serif,Arial;width:min(280px,70%);color:#1a2230}\n#ie-matrix .typein input:focus{outline:2px solid var(--blue2);outline-offset:1px}<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Rate: 1.0xGrid: 0 cellsDecay: 0.90 Speed up Longer glow Dark mode Reset It is a grid, not a set of columns Every cell on the screen holds a character and a brightness value. Heads run down the columns lighting cells as they pass, and everything else fades on its own timer. Turn the decay up<\/p>\n","protected":false},"author":1,"featured_media":5471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"cybocfi_hide_featured_image":"yes","footnotes":""},"categories":[47],"tags":[],"class_list":{"0":"post-5470","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-easter-eggs"},"_links":{"self":[{"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/posts\/5470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/comments?post=5470"}],"version-history":[{"count":8,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/posts\/5470\/revisions"}],"predecessor-version":[{"id":6153,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/posts\/5470\/revisions\/6153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/media\/5471"}],"wp:attachment":[{"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/media?parent=5470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/categories?post=5470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/icon-era.com\/statistics\/wp-json\/wp\/v2\/tags?post=5470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}