Framer X: Prototype with Accelerometer, Gyroscope and No 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.