{"id":6,"date":"2024-04-28T11:40:07","date_gmt":"2024-04-28T11:40:07","guid":{"rendered":"https:\/\/3d-aw.com\/?page_id=6"},"modified":"2026-10-22T10:06:36","modified_gmt":"2026-10-22T10:06:36","slug":"home","status":"publish","type":"page","link":"https:\/\/3d-aw.com\/","title":{"rendered":"Cyberspace"},"content":{"rendered":"\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;500&#038;family=Syne:wght@500;700;800&#038;display=swap\" rel=\"stylesheet\">\n<style>\nbody.home{background:#070b12;color:#d7e0ea}\nbody.home .wp-block-cover,\nbody.home footer.wp-block-template-part{display:none !important}\nbody.home .entry-content,\nbody.home .wp-block-post-content{max-width:none !important;margin:0 !important;padding:0 !important}\n.cs{width:100vw;margin-left:calc(50% - 50vw);background:\n  radial-gradient(900px 520px at 70% 18%, rgba(102,252,241,.08), transparent 60%),\n  radial-gradient(700px 480px at 18% 80%, rgba(155,140,255,.08), transparent 55%),\n  #070b12;color:#d7e0ea;font-family:\"Segoe UI\",sans-serif}\n.cs *{box-sizing:border-box}\n.cs a{color:inherit}\n.cs-hero{min-height:100vh;display:grid;grid-template-columns:200px minmax(0,1fr) 320px;grid-template-rows:auto minmax(420px,1fr) auto;gap:18px 22px;padding:22px 28px 28px;position:relative}\n.cs-hero:before{content:\"\";position:absolute;inset:0;background-image:radial-gradient(rgba(215,224,234,.18) 1px, transparent 1px);background-size:28px 28px;mask-image:radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);pointer-events:none}\n.cs-top,.cs-layers,.cs-stage,.cs-hud,.cs-base{position:relative;z-index:1}\n.cs-top{grid-column:1 \/ -1;display:flex;align-items:center;justify-content:space-between;gap:18px}\n.cs-brand{display:flex;flex-direction:column;text-decoration:none;letter-spacing:.18em}\n.cs-brand strong{font-family:Syne,sans-serif;font-size:15px;color:#fff}\n.cs-brand span{font-family:\"IBM Plex Mono\",monospace;font-size:10px;color:#8ea0b5}\n.cs-nav{display:flex;gap:22px;font-family:\"IBM Plex Mono\",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}\n.cs-nav a{text-decoration:none;color:#d7e0ea}\n.cs-nav a:hover,.cs-nav a:focus-visible{color:#66fcf1}\n.cs-live{font-family:\"IBM Plex Mono\",monospace;font-size:11px;letter-spacing:.16em;color:#66fcf1;border:1px solid rgba(102,252,241,.4);padding:7px 10px}\n.cs-layers{display:flex;flex-direction:column;justify-content:center;gap:10px}\n.cs-layers button{text-align:left;background:transparent;color:#d7e0ea;border:1px solid rgba(215,224,234,.16);padding:12px 12px 10px;cursor:pointer;font-family:\"IBM Plex Mono\",monospace}\n.cs-layers button small{display:block;color:#8ea0b5;letter-spacing:.16em;font-size:10px;margin-bottom:4px}\n.cs-layers button b{font-weight:500;font-size:13px;letter-spacing:.08em}\n.cs-layers button[aria-pressed=\"true\"]{border-color:#66fcf1;color:#fff;background:rgba(102,252,241,.06)}\n.cs-stage{display:grid;grid-template-rows:auto 1fr;min-height:460px}\n.cs-copy h1{margin:8px 0 10px;font-family:Syne,sans-serif;font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.92;letter-spacing:-.04em;color:#fff}\n.cs-kicker,.cs-note{font-family:\"IBM Plex Mono\",monospace;letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:#66fcf1;margin:0}\n.cs-copy p{max-width:460px;margin:0;color:#c5d0dc;line-height:1.55}\n.cs-globe{position:relative;min-height:340px}\n.cs-globe canvas,.cs-globe svg{position:absolute;inset:0;width:100%;height:100%}\n.cs-hud{align-self:center;background:rgba(8,14,24,.78);border:1px solid rgba(102,252,241,.35);padding:18px 18px 16px;clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);backdrop-filter:blur(8px)}\n.cs-hud p{margin:0 0 10px;color:#d7e0ea;line-height:1.5}\n.cs-hud h2{margin:0 0 8px;font-family:Syne,sans-serif;font-size:28px;color:#fff;letter-spacing:-.03em}\n.hud-panel{display:none}\n.hud-panel.is-on{display:block}\n.cs-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}\n.cs-btn,.cs-btn-alt{display:inline-block;text-decoration:none;padding:10px 12px;font-family:\"IBM Plex Mono\",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}\n.cs-btn{background:#66fcf1;color:#071018 !important}\n.cs-btn-alt{border:1px solid rgba(102,252,241,.7);color:#66fcf1 !important}\n.cs-btn:focus-visible,.cs-btn-alt:focus-visible,.cs-layers button:focus-visible,.cs-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px}\n.cs-base{grid-column:1 \/ -1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(215,224,234,.16)}\n.cs-node{padding:16px 8px 0;position:relative}\n.cs-node span{font-family:\"IBM Plex Mono\",monospace;font-size:11px;letter-spacing:.14em;color:#9b8cff}\n.cs-node strong{display:block;margin-top:4px;color:#fff;font-family:Syne,sans-serif;font-size:18px}\n.cs-node em{display:block;margin-top:4px;font-style:normal;color:#9aabbd;font-size:14px}\n.cs-node:not(:last-child):after{content:\"\";position:absolute;right:18px;top:28px;width:36%;height:1px;background:linear-gradient(90deg,#66fcf1,transparent)}\n.cs-section{padding:72px 28px;max-width:1120px;margin:0 auto}\n.cs-section h2{font-family:Syne,sans-serif;font-size:clamp(32px,4vw,48px);color:#fff;margin:8px 0 18px;letter-spacing:-.03em}\n.cs-work{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}\n.cs-card{border:1px solid rgba(215,224,234,.16);padding:22px;min-height:220px;background:rgba(255,255,255,.02)}\n.cs-card h3{margin:8px 0;font-family:Syne,sans-serif;font-size:28px;color:#fff}\n.cs-card p{margin:0 0 16px;color:#c5d0dc;line-height:1.55}\n.cs-services{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.cs-services article{border-top:1px solid #66fcf1;padding-top:12px}\n.cs-services strong{display:block;color:#fff;margin-bottom:6px}\n.cs-services p{margin:0;color:#9aabbd;font-size:14px;line-height:1.45}\n.cs-end{display:flex;justify-content:space-between;gap:20px;align-items:end;padding-bottom:28px}\n.cs-foot{display:flex;justify-content:space-between;gap:12px;padding:18px 28px 28px;border-top:1px solid rgba(215,224,234,.12);font-family:\"IBM Plex Mono\",monospace;font-size:11px;letter-spacing:.08em;color:#8ea0b5}\n.cs-foot a{color:#66fcf1;text-decoration:none}\n@media(max-width:980px){\n  .cs-hero{grid-template-columns:1fr;grid-template-rows:auto;min-height:auto;padding:18px}\n  .cs-layers{flex-direction:row}\n  .cs-layers button{flex:1}\n  .cs-globe{min-height:300px}\n  .cs-base,.cs-work,.cs-services,.cs-end{grid-template-columns:1fr}\n  .cs-services{grid-template-columns:1fr 1fr}\n  .cs-node:after{display:none}\n  .cs-end,.cs-foot{flex-direction:column;align-items:flex-start}\n}\n@media(max-width:640px){\n  .cs-top{align-items:flex-start;flex-direction:column}\n  .cs-nav{gap:14px;flex-wrap:wrap}\n  .cs-layers{flex-direction:column}\n  .cs-services{grid-template-columns:1fr}\n  .cs-section{padding:48px 18px}\n}\n@media(prefers-reduced-motion:reduce){\n  .cs-globe svg{animation:none}\n}\n<\/style>\n<div class=\"cs\">\n  <section class=\"cs-hero\" id=\"world\">\n    <header class=\"cs-top\">\n      <a class=\"cs-brand\" href=\"https:\/\/3d-aw.com\/\"><strong>3DAW<\/strong><span>3D ANIMATION WORKSHOP<\/span><\/a>\n      <nav class=\"cs-nav\" aria-label=\"Primary\">\n        <a href=\"#world\">World<\/a>\n        <a href=\"#work\">Work<\/a>\n        <a href=\"https:\/\/3d-aw.com\/?page_id=32\">Contact<\/a>\n      <\/nav>\n      <div class=\"cs-live\">SIGNAL LIVE<\/div>\n    <\/header>\n    <div class=\"cs-layers\" role=\"group\" aria-label=\"Cyberspace layers\">\n      <button type=\"button\" data-layer=\"orbit\" aria-pressed=\"true\"><small>01<\/small><b>ORBIT<\/b><\/button>\n      <button type=\"button\" data-layer=\"link\" aria-pressed=\"false\"><small>02<\/small><b>LINK<\/b><\/button>\n      <button type=\"button\" data-layer=\"studio\" aria-pressed=\"false\"><small>03<\/small><b>STUDIO<\/b><\/button>\n    <\/div>\n    <div class=\"cs-stage\">\n      <div class=\"cs-copy\">\n        <p class=\"cs-kicker\">Virtual reality \u00b7 Meta Quest<\/p>\n        <h1>Enter the cyberspace.<\/h1>\n        <p>VR Cyberspace 3.0 is a virtual world for Meta Quest, built by 3D Animation Workshop.<\/p>\n      <\/div>\n      <div class=\"cs-globe\" aria-hidden=\"true\">\n        <svg id=\"cs-fallback\" viewBox=\"0 0 400 400\">\n          <defs>\n            <radialGradient id=\"csAtm\" cx=\"40%\" cy=\"35%\" r=\"65%\">\n              <stop offset=\"0%\" stop-color=\"#1c4664\"\/>\n              <stop offset=\"55%\" stop-color=\"#0c1828\"\/>\n              <stop offset=\"100%\" stop-color=\"#070b12\"\/>\n            <\/radialGradient>\n          <\/defs>\n          <circle cx=\"200\" cy=\"210\" r=\"132\" fill=\"url(#csAtm)\" stroke=\"#66fcf1\" stroke-opacity=\".45\"\/>\n          <g fill=\"none\" stroke=\"#66fcf1\" stroke-opacity=\".55\">\n            <ellipse cx=\"200\" cy=\"210\" rx=\"132\" ry=\"28\"\/>\n            <ellipse cx=\"200\" cy=\"210\" rx=\"132\" ry=\"64\"\/>\n            <ellipse cx=\"200\" cy=\"210\" rx=\"132\" ry=\"100\"\/>\n            <ellipse cx=\"200\" cy=\"210\" rx=\"46\" ry=\"132\"\/>\n            <ellipse cx=\"200\" cy=\"210\" rx=\"92\" ry=\"132\"\/>\n            <ellipse cx=\"200\" cy=\"210\" rx=\"132\" ry=\"132\"\/>\n          <\/g>\n          <ellipse cx=\"200\" cy=\"210\" rx=\"176\" ry=\"58\" fill=\"none\" stroke=\"#9b8cff\" stroke-opacity=\".75\" transform=\"rotate(-18 200 210)\"\/>\n          <circle cx=\"250\" cy=\"168\" r=\"4\" fill=\"#66fcf1\"\/>\n          <circle cx=\"156\" cy=\"214\" r=\"4\" fill=\"#9b8cff\"\/>\n          <circle cx=\"214\" cy=\"262\" r=\"4\" fill=\"#66fcf1\"\/>\n        <\/svg>\n        <canvas id=\"cs-globe\"><\/canvas>\n      <\/div>\n    <\/div>\n    <aside class=\"cs-hud\">\n      <p class=\"cs-kicker\">Field readout<\/p>\n      <div class=\"hud-panel is-on\" data-panel=\"orbit\">\n        <h2>Digital orbit<\/h2>\n        <p>A world drawn as latitude, longitude, and signal. This is the outside view of the space you enter in the headset.<\/p>\n      <\/div>\n      <div class=\"hud-panel\" data-panel=\"link\">\n        <h2>One link<\/h2>\n        <p>The headset, the virtual world, and the studio sit on the same line. VR Cyberspace 3.0 is that shared place.<\/p>\n      <\/div>\n      <div class=\"hud-panel\" data-panel=\"studio\">\n        <h2>Built in the EU<\/h2>\n        <p>3D Animation Workshop designs VR, games, and 3D work. The cyberspace is one of the worlds that came out of the studio.<\/p>\n      <\/div>\n      <div class=\"cs-actions\">\n        <a class=\"cs-btn\" href=\"https:\/\/www.viveport.com\/apps\/727a4790-66b2-4f82-956a-1357ffcd18e1\" target=\"_blank\" rel=\"noopener noreferrer\">Open on Viveport<\/a>\n        <a class=\"cs-btn-alt\" href=\"https:\/\/3d-aw.com\/?page_id=263\">Privacy<\/a>\n      <\/div>\n    <\/aside>\n    <div class=\"cs-base\">\n      <div class=\"cs-node\"><span>01 LINK<\/span><strong>Headset<\/strong><em>Meta Quest<\/em><\/div>\n      <div class=\"cs-node\"><span>02 WORLD<\/span><strong>VR Cyberspace 3.0<\/strong><em>The virtual world<\/em><\/div>\n      <div class=\"cs-node\"><span>03 ORIGIN<\/span><strong>3DAW<\/strong><em>The studio<\/em><\/div>\n    <\/div>\n  <\/section>\n  <section class=\"cs-section\" id=\"work\">\n    <p class=\"cs-kicker\">Selected work<\/p>\n    <h2>Worlds we already shipped.<\/h2>\n    <div class=\"cs-work\">\n      <article class=\"cs-card\">\n        <p class=\"cs-kicker\">Virtual reality<\/p>\n        <h3>VR Cyberspace 3.0<\/h3>\n        <p>The first VR cyberspace we built. A Meta Quest application, available on Viveport.<\/p>\n        <a class=\"cs-btn\" href=\"https:\/\/3d-aw.com\/?page_id=2#vr-cyberspace\">View the world<\/a>\n      <\/article>\n      <article class=\"cs-card\">\n        <p class=\"cs-kicker\">Game<\/p>\n        <h3>Magnet Mania 3D<\/h3>\n        <p>A 3D game from the same studio. Watch the trailer, then find it on Steam.<\/p>\n        <a class=\"cs-btn-alt\" href=\"https:\/\/store.steampowered.com\/app\/2298650\/Magnet_Mania_3D\/\" target=\"_blank\" rel=\"noopener noreferrer\">Buy on Steam<\/a>\n      <\/article>\n    <\/div>\n  <\/section>\n  <section class=\"cs-section\" id=\"studio\">\n    <p class=\"cs-kicker\">The workshop<\/p>\n    <h2>Four ways in.<\/h2>\n    <div class=\"cs-services\">\n      <article><strong>VR \/ AR<\/strong><p>Headset experiences and spatial work, including VR Cyberspace 3.0.<\/p><\/article>\n      <article><strong>3D animation<\/strong><p>Characters, scenes, and motion for screens and headsets.<\/p><\/article>\n      <article><strong>Product design<\/strong><p>The shape of a product before it is built.<\/p><\/article>\n      <article><strong>Consultations<\/strong><p>A direct line to the studio for the next world.<\/p><\/article>\n    <\/div>\n    <div class=\"cs-end\">\n      <p>The studio is in the EU. Tell us what you want to enter.<\/p>\n      <a class=\"cs-btn\" href=\"https:\/\/3d-aw.com\/?page_id=32\">Contact the studio<\/a>\n    <\/div>\n  <\/section>\n  <footer class=\"cs-foot\">\n    <span>\u00a9 2026 3DAW<\/span>\n    <span><a href=\"https:\/\/3d-aw.com\/?page_id=2\">Products<\/a> \u00b7 <a href=\"https:\/\/3d-aw.com\/?page_id=263\">VR Cyberspace privacy<\/a> \u00b7 <a href=\"https:\/\/3d-aw.com\/?page_id=32\">Contact<\/a><\/span>\n  <\/footer>\n<\/div>\n<script>\n(function () {\n  var canvas = document.getElementById(\"cs-globe\");\n  if (!canvas || !canvas.getContext) return;\n  var fallback = document.getElementById(\"cs-fallback\");\n  var ctx = canvas.getContext(\"2d\");\n  var rot = 0.6;\n  var mode = \"orbit\";\n  var reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  var nodes = [\n    { lat: 46, lon: 16 },\n    { lat: 24, lon: -98 },\n    { lat: -18, lon: 132 }\n  ];\n  function resize() {\n    var box = canvas.parentElement.getBoundingClientRect();\n    var dpr = Math.min(window.devicePixelRatio || 1, 2);\n    canvas.width = Math.max(1, box.width) * dpr;\n    canvas.height = Math.max(1, box.height) * dpr;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n  function point(lat, lon) {\n    var p = (90 - lat) * Math.PI \/ 180;\n    var t = lon * Math.PI \/ 180 + rot;\n    return {\n      x: Math.sin(p) * Math.cos(t),\n      y: Math.cos(p),\n      z: Math.sin(p) * Math.sin(t)\n    };\n  }\n  function strokePath(builder) {\n    ctx.beginPath();\n    var started = false;\n    builder(function (x, y, visible) {\n      if (!visible) { started = false; return; }\n      if (!started) { ctx.moveTo(x, y); started = true; }\n      else ctx.lineTo(x, y);\n    });\n    ctx.stroke();\n  }\n  function frame() {\n    var w = canvas.clientWidth;\n    var h = canvas.clientHeight;\n    if (w < 2 || h < 2) { requestAnimationFrame(frame); return; }\n    ctx.clearRect(0, 0, w, h);\n    var cx = w * 0.52;\n    var cy = h * 0.56;\n    var radius = Math.min(w, h) * 0.33;\n    var glow = ctx.createRadialGradient(cx, cy, radius * 0.2, cx, cy, radius * 1.45);\n    glow.addColorStop(0, \"rgba(102,252,241,0.16)\");\n    glow.addColorStop(0.5, \"rgba(155,140,255,0.08)\");\n    glow.addColorStop(1, \"rgba(0,0,0,0)\");\n    ctx.fillStyle = glow;\n    ctx.beginPath();\n    ctx.arc(cx, cy, radius * 1.45, 0, Math.PI * 2);\n    ctx.fill();\n    var body = ctx.createRadialGradient(cx - radius * 0.35, cy - radius * 0.4, radius * 0.1, cx, cy, radius);\n    body.addColorStop(0, \"#1a4b68\");\n    body.addColorStop(1, \"#08111c\");\n    ctx.fillStyle = body;\n    ctx.beginPath();\n    ctx.arc(cx, cy, radius, 0, Math.PI * 2);\n    ctx.fill();\n    ctx.lineWidth = 1;\n    ctx.strokeStyle = \"rgba(102,252,241,0.42)\";\n    var lat;\n    for (lat = -60; lat <= 60; lat += 30) {\n      strokePath(function (plot) {\n        var lon;\n        for (lon = -180; lon <= 180; lon += 5) {\n          var p = point(lat, lon);\n          plot(cx + p.x * radius, cy - p.y * radius, p.z > -0.04);\n        }\n      });\n    }\n    var lonStep;\n    for (lonStep = 0; lonStep < 360; lonStep += 30) {\n      strokePath(function (plot) {\n        var latStep;\n        for (latStep = -90; latStep <= 90; latStep += 4) {\n          var p = point(latStep, lonStep);\n          plot(cx + p.x * radius, cy - p.y * radius, p.z > -0.02);\n        }\n      });\n    }\n    ctx.save();\n    ctx.translate(cx, cy);\n    ctx.rotate(-0.45);\n    ctx.scale(1, 0.34);\n    ctx.beginPath();\n    ctx.strokeStyle = mode === \"link\" ? \"rgba(102,252,241,0.9)\" : \"rgba(155,140,255,0.75)\";\n    ctx.arc(0, 0, radius * 1.32, 0, Math.PI * 2);\n    ctx.stroke();\n    ctx.restore();\n    var visible = [];\n    nodes.forEach(function (node, index) {\n      var p = point(node.lat, node.lon);\n      if (p.z < 0) return;\n      var x = cx + p.x * radius;\n      var y = cy - p.y * radius;\n      visible.push({ x: x, y: y });\n      ctx.fillStyle = index === 1 ? \"#9b8cff\" : \"#66fcf1\";\n      ctx.beginPath();\n      ctx.arc(x, y, 4, 0, Math.PI * 2);\n      ctx.fill();\n    });\n    if (mode === \"link\" &#038;&#038; visible.length > 1) {\n      ctx.beginPath();\n      ctx.strokeStyle = \"rgba(102,252,241,0.85)\";\n      visible.forEach(function (p, index) {\n        if (index === 0) ctx.moveTo(p.x, p.y);\n        else ctx.lineTo(p.x, p.y);\n      });\n      ctx.stroke();\n    }\n    if (!reduce) rot += 0.0045;\n    requestAnimationFrame(frame);\n  }\n  document.querySelectorAll(\"[data-layer]\").forEach(function (button) {\n    button.addEventListener(\"click\", function () {\n      mode = button.getAttribute(\"data-layer\");\n      document.querySelectorAll(\"[data-layer]\").forEach(function (item) {\n        item.setAttribute(\"aria-pressed\", item === button ? \"true\" : \"false\");\n      });\n      document.querySelectorAll(\"[data-panel]\").forEach(function (panel) {\n        panel.classList.toggle(\"is-on\", panel.getAttribute(\"data-panel\") === mode);\n      });\n    });\n  });\n  resize();\n  window.addEventListener(\"resize\", resize);\n  if (fallback) fallback.hidden = true;\n  frame();\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>VR Cyberspace 3.0, a virtual world for Meta Quest by 3D Animation Workshop.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/3d-aw.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3d-aw.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/3d-aw.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/3d-aw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3d-aw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":125,"href":"https:\/\/3d-aw.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/3d-aw.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/268"}],"wp:attachment":[{"href":"https:\/\/3d-aw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}