Question 1

How do I add shiny effects to text on a mobile site?

Accepted Answer

Call shiny() with the element selector and set type to 'text' in the configuration object, as shown in the API examples. Ensure the device supports DeviceMotion for tilt responsiveness.

Question 2

Shiny.js or CSS animations for mobile reflections?

Accepted Answer

Shiny.js is ideal for tilt-responsive effects using DeviceMotion, while CSS is better for static or scripted animations without device interaction. Choose based on need for dynamic feedback.

Question 3

Does shiny work on Android phones?

Accepted Answer

The README notes Android testing is pending, so compatibility isn't guaranteed. It depends on DeviceMotion API support, which can vary across Android browsers and versions.

Question 4

How to customize gradient colors in shiny effects?

Accepted Answer

In the gradient config, specify colors as arrays with offset, hex color, and opacity—avoid rgba/hsla and set opacity separately, as detailed in the usage section.

Question 5

Why isn't shiny working on my iPhone?

Accepted Answer

iOS 12.2 and later disable DeviceMotion in Safari by default for security, breaking Shiny. Check your iOS version and ensure permissions are granted, as mentioned in the project warning.

Question 6

Can I use shiny with React or Vue frameworks?

Accepted Answer

Yes, since Shiny is plain JavaScript, integrate it by calling shiny() on DOM elements after mount, similar to the basic usage example. No framework-specific bindings are provided.

Shiny

What is Shiny?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions