Over the last few weeks, people all across the internet have found joy in playing Wordle, the simple-but-addicting word game made by Josh Wardle. Wordle's gameplay is basically guessing letters until you've deduced the word of the day, similar to the classic game Mastermind. And no small part of the appeal is that you can only play the game once a day, and after you win, you're immediately prompted to share your win, either on social media or as a message to friends. The signature block of green emojis was mysterious enough to pique the interest of many, and helped Wordle spread like wildfire.

But, as the New York Times documented, Wordle is just as interesting for the context in which it was made. Josh made it as a gift for his puzzle-loving partner, Palak Shah, and the Times rightly described it as "an act of love". Being a community of people who make the web, our perspective at Glitch also found a lot of romance in the idea that this is a fast, simple, well-implemented web app. Wordle is a PWA that can install instantly on any device, doesn't have a ton of extraneous junk loading on the page, and it's really speedy (a Lighthouse performance score of 95!).

No surprise, then, that Wordle has inspired a host of other creators in the Glitch community and elsewhere to make their own riffs on the idea, all of which bring fun and interesting innovations to the game:

Lynn made "hello wordl" (love that name!), which describes itself as a simple Wordle clone, but it lets you play as often as you want and you can also try to guess longer words. You can check out the source on GitHub.

Potch made Worble here on Glitch, which straightforwardly mimics the original game, but set the stage for some fun and interesting remixes.

Stuart Houghton remixed Potch's Worble into Sweardle — the four-letter-word version of the game. Obviously, that one might be a little bit NSFW, but it shows the power of making it easy to remix, because a half-joking version like this probably wouldn't be worth making from scratch, but if it's just a matter of modifying an existing game to have it focus on curse words, then it's all fun, no drudgery!

And then Jordan Bouvier took the idea to its logical conclusion, creating Queerdle. Jordan warns that some of the words in this one are definitely NSFW, but there's undoubtedly a delight in creating a fully-yassified version of the game. It's an act of love in its way, too!

We expect there will be many more riffs on the theme in the days to come, as Wordle-mania reaches its peak. But in the meantime, we've gathered some of the examples above into a playlist you can check out for yourself. (Be sure to suggest any variations we've missed!)

There are big lessons from the attention and enthusiasm around Wordle that feel important to emphasize as we start a new year:

It's absolutely possible to make something that's wildly popular and beloved solely by making a regular web app.

A lot of the best things on the web are made as acts of love or kindness for someone in one's life, or for a community that means something.

People are especially enthusiastic about things they can share without having to go through an App Store, or without being bogged down by having lots of their data captured during the experience.

Users appreciate when you respect their time and attention and don't just try to capture all of it. Earning a few minutes a day in someone's routine is a wonderful thing.

When you make something great using the web, others will be inspired to make their own versions of it, for fun or for learning, and it gives even more people a chance to connect and have fun.

You don't necessarily need creepy "growth hacks" or weird incentives to reach your audience if they're genuinely enthusiastic about what you've made.

It's fun and funny to make immature jokes about curse words, sometimes!

In all, we're thrilled to start a new year by celebrating an undeniable example of how vibrant and rewarding the independent creative web can be. Thanks to Josh, and to all those who've remixed the Wordle idea to make it their own.

Wordle Mania and the Remixable Web

New for 2022, it's the biggest update ever to Glitch's editor. It's faster, it's easier to use, and it will take you to all new dimensions with 3D asset handling. Our editor is the heart of the Glitch experience: it’s where coders spend the most time, and it’s essential to your creative success. We’ve been working hard to make your everyday experience of creating on Glitch more fun and expressive. The creation experience on Glitch is smarter and swifter than ever, in large part thanks to your suggestions. Check out what we’ve got for you:

The first thing you’ll notice: Everything is just faster. A lot faster. Editing files, navigating through your project, changing your settings, and accessing advanced features are all lightning-quick.

The new editor sports a complete visual overhaul. You spend so much time looking at it, we wanted it to shine for you. Typography is clearer, iconography is cleaner, and a new footer bar gives you instant access to your favorite features, while giving you instant access to your project status.  It’ll turn your 🤔 into a 😃 in no time!

And Glitch is for sharing, so things are getting faster for your project’s visitors, too. All your assets are now cached by Fastly — automatically. It’s a huge FREE upgrade for every app you make on Glitch. Fastly’s got a massively powerful content delivery network, which means all of your assets and images will  load faster than ever for your users thanks to automatic optimization and smart delivery. Best of all, it’s easier than ever to take advantage of Glitch’s smart assets. Uploading assets is zippier than ever, and  now you can just reference them by a short name, instead of tracking down a full URL.

Our number one job at Glitch is to keep you in your creative flow, so we simplify the maintenance of the key files that keep your project’s working happily. (You’ve seen the first version of this before if you’ve ever tweaked your package.json or .env files.) Now we’re extending this capability further with what we’re calling “magic files”, a task-specific UI to help speed you through your edits. Of course, you’re still in control: the files themselves are just standard plain text under the hood, ready for you to edit the old-fashioned way if you want.

There are lots of small conveniences in the new editor that add up to a more pleasant experience overall. Here are some highlights:

✅ Inline error reporting: Glitch has your back when things go awry—we’ll show you errors right on the line that causes them, so you can get things back on track without bouncing between your code and the console.

🎨  Smart color picker: Everyone knows Glitch is all about making the web more colorful! So now, our editor offers you a clever new inline color picker. Stay in focus, and get exactly the values you’re looking for.

🥽 3D Asset support: Working with 3D assets? We’ve got you covered there, too, with full 3D previews right in our asset manager. We’re thrilled that Glitch is one of the most popular ways for creating the metaverse, and we want to make that easier than ever.

✨ Improved Prettier formatting: We’ve made our support for Prettier cleaner and more automatic than ever. And as always, you can fully customize your Prettier config to match your particular preferences.

↔️ Easier import, export and domains: We’ve made it simpler to import and export your code to GitHub (there’s never any code lock-in on Glitch!) and made it so adding a domain to your project is just a click away.

Sharing code is foundational to the last two decades of the web. But it’s often a clunky and cumbersome process, involving arcane invocations of command line utilities and version control tools. Glitch makes sharing easy: just type in the email address or Glitch username of your collaborator and we’ll get them into the mix. Riffing together on Glitch is special: it’s fast and easy for your counterpart to dive in, make a tweak, see immediate changes, and get your feedback.

We’ve been amazed over the years by the scale of your creative ambition, and we’re working behind the scenes with third party services to ensure Glitch can continue to serve your project even as it grows. This new editor lays the foundation for future integrations with some exciting new partners.

Better for everyone, and terrific for the Metaverse

So many exciting creations are happening on Glitch around the Metaverse and WebXR. We hope these improvements, like interactive 3D object previews, make it even more fun to build these experiences on Glitch. We can't wait to see what you build.

We built these changes for you. If something is missing, broken, or just makes one of your regular workflows more difficult, we want to know! Hit us up @glitch on Twitter or reach out via email: support@glitch.com.

UI Refinements

	Overall rework of pixel-level detail
	New bottom menu bar:
		Status
		Logs
		Terminal
	Tools menu
	Settings now accessible via explicit Settings button
	More obvious help menu in right corner
	Piano menu to access keyboard shortcuts listing

Asset manager

	Support for 3D assets, including 3D preview
	Automatic Fastly CDN support for all new projects

Code Editor

	Inline error reporting
	Inline color picker
	Improved code formatting, with Prettier handling more kinds of files

Enhanced magic files

	New state-aware buttons and UI interactions

More help taking first steps

	Remixing a starter gets you a header with extra instructions

Under the hood

	Completely rewritten using Vite for speed of delivery


Behold: An all new Glitch editor!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web–the team and community have built a ton of handy apps you can remix and edit surprisingly easily. 

Remixing will create your own copy of the project–it’ll open in the editor and you’ll see the preview of the app on the right.

Take a quick look at what’s in the project–there’s not much there! We’re mainly going to be working in index.html, so open the file for editing.

Hit the Format This File button at the top of the editor to format your code–this is going to make it easier to read and work with!

Near the top of the HTML you’ll see the A-Frame script being imported–this is all you need to start working with the framework. Now look at the page body, where you’ll find the markup representing the A-Frame entities and components. Take a minute to compare the elements in the markup with what you see displayed in the preview.

The initial scene includes a box, sphere, cylinder, plane, and sky. We’re going to edit these to make them festive and add a little animated interactivity. You don’t need a VR headset for any of what we do in this tutorial, but it is fun to view in one if you have it (even a cardboard viewer on your phone)!

We’ll include images you can use in your project below but feel free to use your own–if you make a nice version you want to show off please let us know! You'll also find all of the pics in the final ~festive-aframe demo project embedded near the end of the tutorial.

Let’s start by adding a night sky background for our festive scene. Save this image:

In your Glitch project, upload it into assets. Once uploaded, select it and copy its URL.

In your HTML, find the sky element, remove the color="#ECECEC" attribute and replace it with a src attribute using your uploaded image URL as the value, so it’ll look something like this:

<a-sky src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/nightsky.png?v=1639737437152"></a-sky>

Let’s also make the plane under the shapes look wintery. Save this snowy pic and upload it into assets:

Replace the plane element color attribute with a src attribute using the URL for your uploaded snow pic (make sure you remove the color attribute or it will tint the image):

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/snow.jpg?v=1639740045726"

Let’s turn the box into a parcel. Take a look at the a-box element, which is a primitive shape. The attributes specify the box position, rotation, and color (this is just a hex value like you’ll see in HTML and CSS): 

The position is represented by x, y, and z values–the z can be tricky to get accustomed to when you start learning to work in 3D so you might like to play around with the values later to get a sense of how they work.

The rotation is represented as around the x, y, and z axes (known as pitch, yaw, and roll)–again, messing around with these in your own project is the best way to get to grips with them.

You’ll notice that the shapes have light and shade added automatically–this is due to the default lighting, but you can change it.

Instead of a block color, let’s give the box a pattern asset to make it look like a parcel. Save this image:

Upload it into your assets also and copy the URL.

Back in index.html, remove the color attribute and instead add one for the image source, with the asset URL as it’s value–it should something look like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/wrapping.png?v=1639738100571"

Keep hitting the Format This File button as you edit the file to make it easy to see your changes.

Your preview should update with the new pattern!

Let’s turn the cylinder into a tree. Make it a cone shape by changing the opening and closing tags from a-cylinder to a-cone. Tweak the size–the cone accepts an attribute to set the bottom radius, so change radius to radius-bottom, leaving the value at 0.5.

<a-cone
    position="1 0.75 -3"
    radius-bottom="0.5"
    height="1.5"
    color="#FFC65D"
    ></a-cone>

OK so far so good, but it doesn’t really look like a tree yet–we’ll use another image asset for that, so save it:

Upload it in your assets like before, copying the URL. Back in the HTML remove the color attribute and replace it with a src attribute that looks like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/tree-pattern.png?v=1639737942800"

Let’s turn the sphere into a snowglobe–first we’ll need to make it look like glass. Save this opaque PNG (it's there, honest, right-click or control+click below):

Upload it into your project assets as before. This time we’re going to use it as a texture, so we’ll add a new section to the A-Frame scene to store assets–near the top of the code inside the a-scene:

<a-assets>
    <img
      id="glass"
      src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe.png?v=1639738756848"
    />
</a-assets>

Now we can use the id to specify this image as a texture. In the opening tag of your sphere element, remove the color attribute and instead add a material attribute:

material="transparent: true; src: #glass"

Let’s rotate the image a little so that the gradient hits a nice spot within the view–add a rotation property to the sphere element:

Let’s put a photo inside it–we’ll use a cylinder, so add a new shape after the sphere:

<a-cylinder
    radius="1.23"
    position="0 1.25 -5"
    rotation="0 90 90"
    width="4"
    height="0.1"
    geometry="segmentsRadial:64"
    ></a-cylinder>

We set the positioning to make the cylinder appear inside the sphere, and the radius is slightly smaller than the globe so that the glass is visible around it.

You can use your own photo if you’d like to personalize the snowglobe, but feel free to use any of these cute twemoji pics:

Upload your picture into assets and copy the URL again. You can include the twemoji pics using these URLs if you like instead:

Santa https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-santa.png?v=1639740868189

Sloth https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-sloth.png?v=1639740872078

Heart https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-heart.png?v=1639740879770

Smiley https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-smile.png?v=1639740883742

Chick https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-chick.png?v=1639740887359

Fish https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-fish.png?v=1639740891328

Add your pic URL to the cylinder as src attribute:

Let’s give the snowglobe a base too–add another cylinder shape after the one you added for the photo:

<a-cylinder
    radius="1"
    position="0 0.15 -5"
    width="4"
    height="0.2"
    color="#cdcdcd"
    geometry="segmentsRadial:64"
    ></a-cylinder>

Now let’s add a message you can customize. 3D text is tricky in VR, so we’ll keep it simple and just use 2D–this time we’ll use an entity, which is a core A-Frame technique you’ll see much more of if you continue learning. The attributes represent A-Frame components, specifying the entity detail.

<a-entity
    text="color:white; value: HAPPY HOLIDAYS!"
    position="3.2 4 -4"
    scale="10 10 1"
    ></a-entity>

Change the text to read whatever you like! You may need to tweak the position to make it stay in the center of the display–experiment with the values!

OK so we have a nice looking scene, but it isn’t interactive yet. Let’s add some animated effects on the shapes when the user looks at them.

First we need a camera, add it near the top inside the scene markup:

<a-entity camera look-controls position="0 1.7 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1">
    </a-entity>
</a-entity>


The camera defines the user perspective on the scene, with look controls and a fuse cursor that will allow us to detect when the user is looking directly at a shape. 

Let’s make the tree rotate when the user looks at it, by adding an animation attribute to the cone element:

animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 5000; easing: easeOutCubic; loop: false; startEvents: fusing;"

We specify the property to animate, which is the rotation. Then we state the positions to rotate from and to, which is a change of 360 around the y axis. We set duration and easing properties, and set the animation not to repeat. We use the startEvents property to trigger the animation when the user looks at the shape.

You can simulate moving around the scene in the preview by clicking and dragging it, so drag the view so that the tree is in the center of the page (or look if you’re using a headset!)

Let’s do something similar with the parcel but we’ll make it expand a little. Add a slightly different animation to the box element:

animation="property: scale; from: 1 1 1; to: 1.1 1 1.1; dur: 1000; dir: alternate; easing: easeInElastic; loop: 2; dir:alternate; startEvents: fusing;"

We use the scale property and loop the animation twice, with alternate direction so that it returns to its original size each time. We also use elastic easing for a bouncy effect.

Let’s also give the snowglobe pic a little animation. Add it to the cylinder that has your uploaded photo displayed in it:

animation="property: rotation; dir: alternate; from: 0 50 90; to: 0 130 90; dur: 5000; loop: true; easing: linear;"

This is similar to the tree but it doesn’t rotate all the way around, just back and forth slightly to give a sense of the globe being a 3D shape.

As a final effect let’s animate the sky, making it continually rotate slowly:

animation="property: rotation; to: -360 0 0; dur: 100000; easing: linear; loop: true;"

Your scene should be looking pretty festive by now–share it with your friends!

Make sure you try it on a VR headset if you have one–just enter the URL for your Glitch app in the browser, e.g. https://festive-aframe.glitch.me

If you want to keep learning, try tweaking the different entities and property values in your project!

OK so we had some fun making a few light edits to the A-Frame base project to make a daft greetings card, but the WebXR community makes some seriously amazing immersive experiences on Glitch. Check out ~xrxmas for a cool snowing effect.

For inspiration check out the playlist of WebXR projects on Glitch. If you have a VR device remember to visit your apps on it–including a cardboard viewer on your phone! We’ve been delighted to see the WebXR development on Glitch and are excited to reveal some editor enhancements in the new year to help support the projects this community of creators is producing!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web, and the team and community have built a ton of handy apps you can remix and edit surprisingly easily.

Make a VR greetings card in just a few steps

Illustration: ~koi-garden by @adarosecannon

The real metaverse was the friends we made along the way: here’s a look at how Glitch creators have created hundreds of thousands of VR and AR experiences.

Whether you’re into Virtual Reality, Augmented Reality, Mixed Reality or some other new form of reality we haven’t discovered yet, Glitch is home to a thriving community of creators exploring the boundaries of 3D content. In fact, Glitch is home to one of the largest communities of XR creators in the world, with hundreds of thousands of projects created by artists, coders and designers.

You’ve probably heard a lot of talk about VR recently (especially as hype and attention around the metaverse has jumped in recent months)! The good news is, for the Glitch community, the metaverse has already been with us for years. So let’s take a look at the frameworks developers are using to build WebXR–and discover some incredible Glitch community apps along the way. Stay tuned for tomorrow, when we’ll share a really fun starting point for creating your first WebXR experience, and even offer a sneak peek at how we’ll be improving the XR creation experience on Glitch in the new year.

Like everything on Glitch, creating XR happens thanks to open standards and open code. And you can view them all on standard devices, ranging from your regular web browser to the fanciest 3D headset. Let’s take a look at some of the best tools, all of which you can use for free.

The term WebXR refers to “eXtended” or “cross” reality experiences you can access on the web. The X is there to represent a broader range of applications than Virtual Reality (VR) alone. Where VR creates virtual worlds, Augmented Reality (AR) overlays the physical world, and Mixed Reality (MR) is a hybrid of both. So WebXR creates these on the web–which means you can access them through your browser. Still confused? You’re not alone, but here’s the thing–it doesn’t matter, you can still try VR! (lol, there won’t be a test.)

As a user, you can try these experiences out on a computer, phone, or VR device. The apps can utilize client info from the device, allowing developers to create responsive, immersive experiences, for example, tailoring behavior to user position and movement. The standards for building WebXR support headsets like Oculus, Google Cardboard, Samsung Gear, and HTC Vive among others. 

Creating WebXR applications can involve a seemingly overwhelming variety of techniques and technologies. However, it’s surprisingly easy to get started, and luckily you can see a ton of amazing demos on Glitch, where the creators have made their source code available openly for you to learn and remix. Let’s dive in.

~aframe-gallery in the browser on mobile before entering AR or VR mode

The gist of WebXR is that you can access it on the web, by navigating to addresses in your browser, just like you would to visit websites. This is possible because the supporting technology is now built into browsers like Chrome and Firefox. Mozilla initially led development with the WebVR, WebXR, and WebGL APIs:

The original WebVR API was deprecated and replaced with the WebXR API to also support AR.

WebGL provides support for rendering 3D graphics on the web, natively inside the browser. Typically developers don’t write WebGL directly, but work in frameworks built on top of it, which we’ll get to below.

The WebXR Device API provides an interface for managing device access and using WebGL to render 3D scenes–again, you’re most likely to use a framework to actually write your code, with this supporting the underlying implementation. The API lets your apps detect and respond to user data from device sensors, rendering the scene at an appropriate framerate, and delivering it to the user viewpoint.

When you visit a WebXR app in the browser, you might see AR and VR buttons on the screen–this is courtesy of the API providing the apps with access to the browser session, and will determine the mode for the experience (as you’ll see if you try toggling between them e.g., on a phone–in AR mode the app will display on top of the camera view of your surrounding area, and in VR mode it’ll display in stereo, or “binocular” view, with a different image for each eye).

Supporting browsers like Firefox and Chrome benefit from the emulator extension that developers can use to build WebXR experiences on desktop, testing for different device types.

OK, with the supporting infrastructure bit out of the way, let’s turn to the frameworks you’re more likely to encounter directly as a WebXR developer.

The virtual world is rendered in three dimensions: Three.js and Babylon.js are common JavaScript frameworks that help developers to describe those spaces by utilizing WebGL in the browser.

3D graphics require extensive mathematical calculations and can therefore be challenging to code directly in WebGL. Graphics frameworks built on top of WebGL abstract the process, making them more accessible to code in. They also provide a camera view that WebXR experiences are able to incorporate in order to build the immersive world. These libraries only take care of the graphics and rendering for AR and VR experiences, so you’ll use additional frameworks to create interactive apps. 

A-Frame allows you to build VR on top of HTML, so you can create WebXR experiences just by including a script and markup in your web pages–check out index.html in the ~aframe base project on Glitch, it genuinely just looks like an ordinary web page! 

A-Frame is an open source framework that uses Three.js in its implementation, and you can manipulate it using JavaScript just like other web applications. In A-Frame you can write cross-platform VR apps that users on multiple device types can access.

A-Frame allows you to build WebXR experiences by including elements in the body of an HTML page to define a scene. This makes A-Frame remarkably low-barrier to get started with–if you’ve ever written HTML you can write A-Frame code. Above and beyond this, A-Frame gives you the ability to use the DOM APIs as you would when developing a standard web app. It also benefits from a visual inspector built right into the browser dev tools that helps develop and troubleshoot your scenes.

A-Frame uses an Entity-Component-System architecture, which is common in game development. You create scenes by declaring entities, with the attributes acting as the components (they define characteristics like geometry, material, and position).

Since WebXR is very much a joint effort between hardware manufacturers, browser developers, and software frameworks, you’ll find useful learning resources and apps being generated by teams working on device platforms, like Samsung Internet. These teams are also involved in the W3C working groups focused on developing support for building immersive experiences on the web using the standard APIs.

We already learned that creating 3D spaces is complex. While you can define scenes purely using A-Frame markup elements, once your apps get beyond the basics, they’re likely to include assets created externally. Graphical models using GLTF (GL Transmission Format) describe a 3D model as a node hierarchy, together with materials and shaders. GLTF files themselves are coded in JSON, but they typically rely on external resources including GLB (binary) files describing geometric info, and can include image resources in formats like JPG and PNG. Developers and WebXR artists use a variety of specialist tools to build GLTFs, such as Blender.

There is a staggering amount of WebXR development on Glitch–we’ve highlighted a few throughout this post but be sure to check these projects and user profiles out:

~aframe-animated-lights by @ngokevin for some lovely animated 3D lights

~vr-cashcannon by @mrdoob, the creator of Three.js

~earthy-course by @adarosecannon is a virtual Totoro demo

~dixpark by @technobotanist is a virtual picnic spot

~aframe-teleport-controls-extra by @rdub80 demonstrates teleport controls

~gloomy-night by @igor shows a cool torch effect

~alien-terrain by @jerryb_jr is a sci-fi landscape

~aramismetaverse by @AramZS generates 3D writing

~orbsimulator by @pushmatrix for pondering

~naf-examples by @vincentfretin for a host of networked A-Frame examples

~homer-metaverse by @fcor for Homer getting immersed

~ilusion-planetaria by @aullidoestepario for spinning, orbiting planets

~vrtheremin by @pushmatrix is a VR Theremin, what more could you want

~ghostdiver by @amayne watch out for the sharks

~beaded-mud-track by @jeranh is a virtual tour

~groad-tour by @nbackous is a chronicle of Portland venues

~virtual-reality-city by @VictoriaDelCastillo is an immersive cityscape

~afrofutureisms by @ktduffyincorperated is an Afrofuturist art project

~immigrationcolab by @mehtapaydin is a Tribeca Film Institute Immigration Co/Lab project

~lalaland-planetarium by @shwetharajaram is a model of the planetarium from La La Land

Last but not least, Smooth Voxels by @SamuelVanEgmond is an amazing utility for generating 3D models

This may look like a long list, but it’s genuinely just the tip of the iceberg when it comes to the WebXR activity on Glitch. 

Experience them all in the community showcase playlist!

When visiting a WebXR site in your browser, make sure you use https:// so that it can access the relevant device sensors.

Hopefully this post has given you a clearer sense of how the pieces in WebXR fit together and introduced you to some cool examples of what people have built with them. We’ve been delighted to see the WebXR development on Glitch and want to support the growth of this community of creators with some exciting editor developments you’ll see in the new year.

If you like what you see so far and want to try WebXR development yourself, check out the ~xrxmas festive scene, and for more in-depth learning our intro to WebVR starter kit. The A-Frame team and community have made getting into WebXR development incredibly easy with a host of Glitch projects you can dive into–tomorrow we’ll share a tutorial on remixing the ~aframe base project to make a holiday greetings card!

Whether you’re into Virtual Reality, Augmented Reality, Mixed Reality or some other new form of reality we haven’t discovered yet, Glitch is home to a thriving community of creators exploring the boundaries of 3D content. In fact, Glitch is home to one of the largest communities of XR creators in the world, with hundreds of thousands of projects created by artists, coders and designers around the world.

Create your own reality on Glitch

Glitch In Bio is the easy, fun, and completely free way to build a links page for all your social media profiles. We’ve seen so many impressive, inspiring remixes, and we wanted to share our favorites to encourage you to make your own!

From @aTylerRobertson, a clean, elegant set of links. With Glitch In Bio, you can style every detail of your page.

But remember: we’re talking about HTML, CSS and any other web technology you want. If you crave an animated, dynamic background, you can do that! @Metamoar’s page is packed with motion, energy, colors and personality.

You can solve lots of problems with your own personal links page. For example, @jgriffiths made a clean and simple page of links to help readers find his books, and help tipsters get in touch.

Artist @echodeltamoon gives a glimpse into her art and aesthetic with a vibrant photo background to host an overview of all the places to find her online.

From @blprnt, check out a perfectly-themed list of links that matches the design of his book Living In Data. Don’t miss the story behind it!

There’s @_Maru_WTF, who goes far beyond a simple list of links to include their latest updates and atmospheric images.

The calm design and careful color choices of @locklyle’s page do a wonderful job of bringing you into her artwork on multiple different platforms.

Everyone’s favorite rapid transit system for the Bay Area has a pleasing, perfectly on-brand set of links that make it easy for their TikTok followers to find @SFBART on any other service.

The smart juxtaposition of @snotskie’s profile pic and background image make the links on this page really pop.

This is only a handful of examples out of thousands of new Glitch In Bio remixes. Whatever you can imagine, you can build with the magic of the open web. Get started on your own for free, right here! And be sure to keep sharing your feedback and submitting your Glitch in Bio templates and we’ll keep showcasing your awesome work. 

Glitch in Bio Showcase

November was a very busy month for Glitch! We launched Glitch in Bio, the easiest—and free—way to share your links, and also made it a Progressive Web App, and even shared a bit about our approach to phishing. Whew! That was a lot. But you know who kept even busier? You—the Glitch community! So let’s check out what you invented, re-invented, boosted, or tinkered with, during a month that made us extra thankful for you. 

Thousands of Glitch community members, new and old, created their own Glitch in Bio apps during the last month, and here are a few from our Playlist of Featured Glitch in Bio remixes:

A simple Twitch bio, created by Kevin Illanas

Designer and bird enthusiast Alex Tomlinson

Web developer and Glitch contributor, Christina Voudouris

Comedy and comics from software engineer Rolando Garcia

Remember, if you have a Glitch in Bio theme or addition you want to show off, we’d love to see it. Just share it with us using this form.

~modern-roads by @mapsmania maps both the roads of medieval and modern London.

From maps to games, to documenting a wholly created language, the Glitch community shared an abundance of intrigue and delight during the last 30 days. 

~mandala-its-alive by @corruptcatalyst maps out music theory on a 12-point shape and visualizes MIDI song notes. We won’t judge them for mislabeling “Sweet Child of Mine” as an Aerosmith song.

~blockly-demo-examples by @TakashiSasaki shows Blockly being used on Glitch!

~wonyoungs by @dawnwinery is a very sweet personal webpage.

~hafestrahandbook, a constructed language that is a hybrid of French and Japanese created by @LWFlouisa.

~pieces-of-sheet by @aTylerRobertson is a simple, small spreadsheet app for sharing data/formulas!

~emoji-to-unicode by @potato4d is an API that decodes emoji into unicode!

~bugvsboxes by @joegaffey is like dodgeball, but with a VW bug, an actual bug, emoji, and boxes!

~aramismetaverse by @AramZS lets you generate word art in Three.js.

~a-scene-edit by @poeticAndroid is an A-frame scene editor, like a little Glitch for a little WebVR!

Washington University’s Experience Design club has the best webpage and—surprise!—it’s on Glitch.

~dungeon-the-generating by @naxwell is your new favorite D&D dungeon generator.

~twitch-bot-starter-pack by @seanpat09 is a Twitch chatbot that they’ve been both writing and streaming tutorials about.

~incredible-spinners by @teropa is an AI-powered interactive music experience with spinners and a choice of which key to play in. 

Playlists are still our favorite way to share all the cool things you build on Glitch. Here are some standouts from the past month:

Some cool A-frame apps by @jerryb_jr: Naoto's Conversations with Computers is an exhibition of artistic works produced during the Silicon Friends Camp, a 5-days retreat with 15 artists in the Austrian alps that took place last summer.

@nmetlapalli54826's “VHS Web Design Course” playlist curates a collection of projects they created while learning web design a couple of years ago.

November was a very busy month for Glitch!