Framer X: Prototype with Accelerometer, Gyroscope and No Code

Framer X is very powerful. You already know that. You also know the Framer X Store. But did you know this? This little, unknown component that accesses accelerometer and gyroscope data without code?

Yes, this Framer X component exists. It’s called Shiny by Freddie Iboy.

Right now the component offers a few customization options. Version 1.1 allows users to customize:

• Shiny mode: Background or Off
• Type: Linear or Radial
• Angle of the effect

Freddie said he will update the component with more controls and options. Things like:

• Greater control on accelerometer and gyroscope
• Picker for solid colors
• Picker for gradient colors

A Framer X Component and No Code

It’s amazing that a component from the Framer X store can create such a dynamic prototype with no code. Think about it. You click to install the component. Drag it on a frame. Tweak some options. Done.

The prototype shines (no pun intended) on the phone. In this case an iPhone X. The preview window of Framer X doesn’t have access to an accelerometer or a gyroscope. Because MacBooks don’t have such hardware.

From Sketch to Framer X

The demo I created while fooling around with Shiny component is simple. First I created a mask in Sketch by recreating the Framer logo. Then I added some text which I converted to outlines. I combined (difference) the logo and text with a rectangle to create the two “holes”. The Framer X logo and Framer X cut through the rectangle.

Next step was to import this mask into Framer X from Sketch on top of the Shiny component.

Shiny version 1.1 offers only one color. A shiny gold / yellow color which looks good but not great for what I had in mind. So what I did was to create two frames in Framer X that sit between Shiny and the mask.

Both frames have a gradient color, 80% opacity and a Fill set to Multiply. With these settings, the frames let enough of the Shiny effect pass through them. Last thing was to set a saturate filter at 200% through Framer X.

So far, no code at all. Pretty cool, right?

Putting Everything Together

This prototype with data from accelerometer and gyroscope is very simple. It’s more of a proof of concept if anything else. Still, it can be very useful for small effects during app onboarding.

The structure is simple. Think of it as three layers.

• The layer on the bottom is Shiny
• The layer in the middle are two frames with gradients
• The layer on top is a mask from Sketch with holes over the are of the gradients

AWhen the phone tilts, Shiny reads the accelerometer and gyroscope in real-time. It changes the color to match the iPhone movement. These color changes pass through the middle layers which both have an opacity set to 80%. The holes in the top mask layer create the effect.