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.

“Interactive Storytelling” by @jonoellis includes two clickable interactive storytelling apps (click them).

We’re in the final countdown for 2021 now, and we can’t wait to see what you come up with over the next few weeks. As always, if you have Glitch projects or playlists you built or love and want us to feature, either share them on the forum, tweet them to us @glitch or email community@glitch.com—we’d love to see your work in our next roundup! ✨

The project featured in this post’s header image is ~kalidokit built by @yeemachine which is now open source. Learn more about the creator in our interview with Richard Yee.

November was a very busy month for Glitch!

Last month on Glitch, the November 2021 edition

We recently released Glitch in Bio, an easy to use, fully customizable link-sharing app. Since then we’ve been delighted and inspired by the amazing remixes you’ve been creating. We’ve also received lots of extremely useful feedback and suggestions for developing the project–which we couldn’t wait to get stuck into. We wanted to take advantage of how easy it is to iterate on this project and continue delivering enhancements.

You can now remix the first update of Glitch in Bio, improved by community contributions!

Connect to all of your networks more easily than ever, thanks to the newest social icons suggested or added by community members:

Mastodon courtesy of this @evermorian remix

Bandcamp both requested by @smilinggoat in the forum thread

Ko-Fi, also from Andy Piper who included incredibly helpful notes inside the project

Your Glitch in Bio page can better serve everyone in your audience thanks to all of these accessibility enhancements suggested by @pixely:

Increased contrast in the default ‘glitch’ theme

Image alt text – you’ll see a new property in ‘settings.json’ allowing you to add alt text to your images that will automatically be populated in the markup.

Focus states on links throughout the app for easier keyboard interaction

And finally, a few tweaks to improve the app UX:

Less flickery icons thanks to more consistent hover states

Better page descriptions on Twitter thanks to the ‘og:description’ update explained in Andy Piper’s fantastic blog post write-up of remixing the app

The remix button gets updated text with clearer language by @metamoar

If you already have a remix of Glitch in Bio and want to update it, visit the main project and grab the new parts:

Copy the content of layout/social.html into your own

In settings.json, add the icons you want in the ‘social’ object

Copy the content of public/styles/style.css (and public/styles/themes/glitch.css, if you’re using it)

Copy layout/links.html and layout/social.html for the alt text and keyboard focus. 

In settings.json include an ‘altText’ property for each link with an image you want to supply text for

Copy the content of layout/glitch-footer.html

In addition to theme remixes we’ve also been seeing some very interesting developments on the app functionality that we’ll also dive into soon! The project is completely customizable–check out the help docs for tips on how to edit your remix. And don’t forget your Gitch in Bio site is also a Progressive Web App (PWA) your users can install on their devices.

We’re not done! Keep sharing your feedback and submitting your Glitch in Bio templates and we’ll keep building this project together. 

Glitch In Bio, now community improved

With the launch of our new “Glitch In Bio” starter project, we’ve seen thousands of creators make link pages for their social media in an inspiring variety of ways. But there’s something interesting happening behind the scenes with Glitch in Bio that points to an exciting new opportunity for the open web.

PWAs, or progressive web apps, are a way of giving apps built on web technologies the same features and finishing touches as the native mobile apps we use on our phones and other devices every day. PWAs have been around for a while, but are still not as broadly adopted by users as they might be, because most of the time, it takes extra technical work to turn a regular web app or web page into a PWA. Often, that work falls onto the list of things we file under “I’ll do that later…”

The good news is, thanks to the defaults we’ve set on Glitch, every single one of the Glitch In Bio link pages that’s been built is already a PWA. It’s built right into the project. And it’s the first step on a larger path of giving every creator the benefits of PWAs without all the technical hassles of setup or configuration.

Having your app function as a PWA brings a number of advantages. 

Being a PWA makes your app installable on user devices vs just being accessible through the web browser. This creates a higher quality experience that’s more like native (and you can enhance it to leverage native functionalities like notifications).

PWAs are more discoverable because they’re shareable by link and easily optimized for search engines, as well as being available through app stores, which means you can make it discoverable to a whole new audience, and even optionally monetize it! 

Last but not least, PWAs create a more resilient and inclusive user experience because your content is cached for offline use, so users can still access them even with restricted connectivity. Since Glitch in Bio is a generated static site, it’s highly performant and delivers content to the user super quickly by default.

Recent Posts