Inspiration
Thinking that many users like to express themselves using filters, we had the idea to make this experience more interactive, developing a filter that the user creates his own text. We use neon aesthetics to be something more fun and young.
What it does
It is a filter that you can write your own messages using a keyboard. Your message appears on the top of your head and also in the environment, the letters react to the sound. To write your message you select a letter and tap the screen. To change the color of the text you may use the slider on the right.
How I built it
First we made a brainstorm to choose our project ideia, and in this process we chose our goal with the effect.
We started the project by assembling the keyboard, for that it was necessary to choose a monospace font and we set up a spritesheet in photoshop and sent it to Spark AR. We’ve made two spritesheets: one for the diffuse/alpha and another for the normal map.
Then we manipulate the UVs to achieve the sprite sheet mechanics, hence a character generator.
Then it was necessary to choose how the text would appear on the scene. We decided to put it in our head and in the environment, because that way we could give the users the opportunity to express themselves with text sentences
Challenges I ran into
- Render pipeline
- Creation of the character (letters) generator
- Deal with discrepancies in the Spark Ar shader.
Accomplishments that I'm proud of
- Keyboard
- Neon texture and color.
What I learned
_ How to set up an image in photoshop to use as a keyboard in Spark ar.
What's next for Neon Keyboard
We would like to transform the letters in a 3D object so we may place in the environment and walk through the text.

Log in or sign up for Devpost to join the conversation.