A library for pretty shadows.

Last update: Jul 29, 2022

shine.js

A library for pretty shadows.

See the working demo at http://bigspaceship.github.io/shine.js/.

Get Started Inline docs

Install using bower: bower install shine or download as zip or fork on GitHub.

Create a Shine.js instance for each DOM element you'd like to shine:

var shine = new Shine(document.getElementById('my-shine-object'));

Change the light position and make sure to redraw:

shine.light.position.x = window.innerWidth * 0.5;
shine.light.position.y = window.innerHeight * 0.5;
shine.draw(); // make sure to re-draw

Configuration

Each shine instance has a property pointing to an instance of shinejs.Config. One config can be shared amongst multiple shine instances.

When a config value changes, shine.draw() needs to be called to re-draw with the new settings.

Change the shadow of a shine instance:

shine.config.opacity = 0.1;
shine.config.blur = 0.2;
shine.draw(); // make sure to re-draw

Create a shared shinejs.Config instance:

// all parameters are optional and can be changed later
var config = new shinejs.Config({
  numSteps: 4,
  opacity: 0.2,
  shadowRGB: new shinejs.Color(255, 0, 0)
});

// pass the config in the constructor
var shineA = new Shine(document.getElementById('my-shine-object-a'), config);
var shineB = new Shine(document.getElementById('my-shine-object-b'), config);

// or assign it to an instance later
var shineC = new Shine(document.getElementById('my-shine-object-c'));
shineC.config = config;
shineC.draw(); // make sure to re-draw

Shine API

Note: Shine is also mapped to shinejs.Shine. Use the long version if Shine is already defined.

Shine(domElement, optConfig, optClassPrefix, optShadowProperty)

The Shine constructor. Instantiate as new Shine(...) to create a new instance.

Parameter Type Description
domElement !HTMLElement The DOM element to apply the shine effect to.
optConfig ?shinejs.Config= Optional config instance. If no instance is passed it a new instance with default values will be stored in the config property.
optClassPrefix ?string= Optional class prefix that will be applied to all shine DOM elements. Defaults to shine-.
optShadowProperty ?string= Optional property name that the shadow will be applied to. Overrides the automatic detection for use of either textShadow or boxShadow. The value will be applied as element.style[shadowProperty] = '...' and automatically prefixed for legacy browsers (e.g. MozBoxShadow).

Shine.prototype.draw()

Draws all shadows based on the current light position. Call this method whenever a shine parameter is changed.

Shine.prototype.destroy()

Releases all resources and removes event listeners. Destroyed instance can't be reused and must be discarded.

Shine.prototype.updateContent(optText)

Re-initializes all shadows. Use this when you want to change the text or the domElement's contents have changed.

Parameter Type Description
optText ?string= If defined, will replace the DOM element's textContent. If omitted, the content will be read from the DOM element.

Shine.prototype.enableAutoUpdates()

Adds DOM event listeners to automatically update all properties.

Shine.prototype.disableAutoUpdates()

Removes DOM event listeners to automatically update all properties.

Shine Properties

Property Type Description
domElement HTMLElement The DOM element to apply the shine effect to.
config shinejs.Config Stores all config parameters.
light shinejs.Light Stores the light position and intensity.

shinejs.Config API

shinejs.Config(optSettings)

The shine config constructor. Pass an optional settings object from which to read values.

Parameter Type Description
optSettings ?Object= An optional object containing config parameters.

shinejs.Config Properties

Property Type Default Description
numSteps number 8 The number of steps drawn in each shadow
opacity number 0.1 The opacity of each shadow (range: 0...1)
opacityPow number 1.2 The exponent applied to each step's opacity (1.0 = linear opacity).
offset number 0.15 Larger offsets create longer shadows
offsetPow number 1.8 The exponent applied to each step's offset (1.0 = linear offset).
blur number 40 The strength of the shadow blur.
blurPow number 1.4 The exponent applied to each step's blur (1.0 = linear blur).
shadowRGB shinejs.Color new shinejs.Color(0, 0, 0) The shadow color in r, g, b (0...255)

shinejs.Light API

shinejs.Light(optPosition)

The light constructor. Pass an optional position to apply by default.

Parameter Type Description
optPosition ?shinejs.Point= An position. Defaults to new shinejs.Point(0, 0).

shinejs.Light Properties

Property Type Default Description
position shinejs.Point new shinejs.Point(0, 0) The position of this light.
intensity number 1.0 The intensity of this light. Gets multiplied with shadow opacity.

shinejs.Point API

shinejs.Point(x, y)

A 2D point class.

Parameter Type Description
x number= The x-coordinate. Defaults to 0.
y number= The y-coordinate. Defaults to 0.

shinejs.Point Properties

Property Type Default Description
x number 0 The x-coordinate.
y number 0 The y-coordinate.

shinejs.Point.prototype.delta(p)

Returns a new instance of shinejs.Point with the x- and y-distance between this instance and the point p.

Parameter Type Description
p shinejs.Point The point to which to calculate the distance to. Distance will be expressed as this.x - p.x and this.y - p.y.

GitHub

https://github.com/bigspaceship/shine.js
Comments
  • 1. Doesn't work with Require.js?

    I've tried including shine.js into my project with require, but it doesn't work. I get two errors: the first is exports is undefined and the second is that the module returns undefined.

    Reviewed by gfarrell at 2014-04-15 16:52
  • 2. Removes elements from the DOM

    A really beautiful plugin this...

    But I'm having a little trouble when applying it to a container which has (so far) 12 children to whom I want shadows to be applied. However, when called, the plugin remove 6 of these children. I couldn't find any mention of this kind of behaviour in the documentation, or an option for specifying the max number of child elements.

    So I was wondering... Is this intended behaviour?

    I can understand there would be performance issues if there are too many elements, but it might be useful to know that's what's happening. Or even to be able to set the max number of elements.

    (I did look through the plugin's JS but couldn't spot where this might be happening. I'd be happy to try and implement an a maxElements option...)

    Thanks!

    Reviewed by bravokiloecho at 2015-04-16 18:13
  • 3. Doesn't work with transparent images.

    Hi,

    Amazing plugin. I love it. When i am using it on png image, shadow is not considering transparent pixels. Please see attached screenshot. (In screenshot i have used transparent circle.). Is it possible to consider transparent pixels in png images?

    circle

    Reviewed by vijay-vanecha at 2014-04-24 13:48
  • 4. Added option to bind light source to scroll position (also removed console logs)

    There are inline styles on the body and h1 in the mouse-follow demo to better immediately demonstrate the added option. I also removed the console logs.

    Reviewed by cmd-kae at 2014-04-15 00:00
  • 5. High CPU utilization - 80%+

    If I mouse around at normal speed in the demo, CPU utilization jumps to 80% - 90%. I'm using Chrome 43.0.2357.124 m on Windows 7 on a Dell E7450 Core i5 with some an integrated GPU (which is perfectly capable of handling this demo at <40% CPU).

    Reviewed by dandv at 2015-06-23 14:09
  • 6. Remove moot `version` property from bower.json

    Per bower/[email protected]

    Also their maintainer says they probably won't ever use it: http://stackoverflow.com/questions/24844901/bowers-bower-json-file-version-property

    Reviewed by kkirsche at 2015-06-12 01:12
  • 7. Add docs badge to README

    Hi there,

    I want to propose to add this badge to the README to show off inline-documentation: Inline docs

    The badge links to Inch CI and shows an evaluation by InchJS, a project that tries to raise the visibility of inline-docs (early adopters include forever, node-sass and when).

    The idea is to motivate aspiring Node developers to dive into Open Source projects and read the code. It's about engagement, because, while testing and code coverage are important, inline-docs are the humanly engaging factor in Open Source. This project is about making people less adverse to jumping into the code and see whats happening, because they are not left alone while doing so. I know that, because I put off reading other people's code way too long in my life.

    Although this is "only" a passion project, I really would like to hear your thoughts, critique and suggestions. Your status page is http://inch-ci.org/github/bigspaceship/shine.js

    What do you think?

    Reviewed by rrrene at 2015-02-12 12:42
  • 8. Does not work on touch devices (ie. iPad)

    On my iPad the shadows don't follow my finger touch. What about making the light source the currently selected button or tab? If the button is hilighted like a led, it make sense making it the light source instead of the mouse cursor. It will works on touch devices too.

    Reviewed by Emasoft at 2014-05-28 15:08
  • 9. Can't get Shine to correspond to gyroscope title

    Hi, I'd like to know how to make the shadows correspond to gyroscope input on mobile devices, similar to how the Shine.js demo works.

    Can you please help?

    Thanks!

    Reviewed by lostnotstranded at 2018-10-02 18:14
  • 10. How to add mutiple text with Shinejs

    Hi there, I wanted to add 2 Titles with shadows one at the very top of the page and above the footer. When I add the second one to the page with shinejs, the 1st one gets disabled for cursor movements but has soft shadows. second one gets the cursor movements.

    Please suggest what I should do.

    Thank you

    Reviewed by kannan6240 at 2017-03-01 18:20
  • 11. some suggest about css

    #1 add transform : translate3D(0,0,0) to shine-letter class. to use GPU accelerate #2 add media query disable text-shadow when print when print, text-shadow may made text difficult to read

    Reviewed by wqj97 at 2016-12-16 17:57

Related

A library for handling animation warmup generically

This solution is not very scalable for applications with many animations to warm up and is meant mostly as an example of an approach applications could take to warmup their animations until a more permanent solution is available.

Jun 6, 2022
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Jul 28, 2022
A small library for creating snapping lists.

snaplist A small cozy library that allows you to make snappable list views. Issues and Pull Requests are really appreciated! Snaplist supports differe

Jul 31, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

Jun 22, 2022
A Flutter library for loading skeletons

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Jan 6, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Jan 21, 2022
Flutter percent indicator library
Flutter percent indicator library

Percent Indicator Circular and Linear percent indicators Features Circle percent indicator Linear percent indicator Toggle animation Custom duration o

Aug 12, 2022
Load and get full control of your Rive files in a Flutter project using this library.
Load and get full control of your Rive files in a Flutter project using this library.

⚠️ Please migrate to the new Rive Flutter runtime. This runtime is for the old Rive (formerly Flare) and will only receive updates for breaking issues

Aug 8, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

Jul 31, 2022
A flutter package which display the library collapse according to the number of images associated with hero animation
A flutter package which display the library collapse according to the number of images associated with hero animation

?? Gallery Collapse A flutter package which display the library collapse accordi

Jun 7, 2022
A library for pretty shadows.

shine.js A library for pretty shadows. See the working demo at http://bigspaceship.github.io/shine.js/. Get Started Install using bower: bower install

Jul 29, 2022
Flutter pretty qr - Pretty QR code with round edges.
Flutter pretty qr - Pretty QR code with round edges.

pretty_qr_code Pretty QR code for Flutter. You can round the edges with parameter or use the standard view. Features Created with QR dart Screenshots

Jul 12, 2022
Add decoration capabilities for the Icon widget with shadows, borders, gradients.

icon_decoration Add decoration capabilities for the Icon widget with shadows, borders, gradients. This new DecoratedIcon widget overlap itself with th

Aug 3, 2022
Simple, pretty and powerful logger for flutter
Simple, pretty and powerful logger for flutter

Language: English | 中文简体 flutter_logger Simple, pretty and powerful logger for flutter,It has the log level, file name and line number, and can custom

Mar 10, 2022
A pretty plotting package for Flutter apps
A pretty plotting package for Flutter apps

flutter_plot R. C. Howell - 2018 A pretty plotting package for Flutter apps. Sizing and autopadding isn't great right now, but tinkering with padding

Jun 7, 2022
A flutter package that developers have pretty logs instead just printing everything like a newbie

A flutter package that developers have pretty logs instead just printing everything like a newbie. Features Makes it easy to log to console without us

Nov 28, 2021
Simple but pretty cool birthday countdown app built using flutter
Simple but pretty cool birthday countdown app built using flutter

Simple but pretty cool birthday countdown app "For You" ?? Don't forget to star ⭐ the repo if you like what you I have created ?? . ?? GIF of a sample

Feb 1, 2022
Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.
Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.

Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to

Feb 23, 2022
[Flutter Library] Flamingo is a firebase firestore model framework library. 🐤
[Flutter Library] Flamingo is a firebase firestore model framework library. 🐤

Flamingo Flamingo is a firebase firestore model framework library. https://pub.dev/packages/flamingo 日本語ドキュメント Example code See the example directory

Jun 3, 2022
Flutter-Animated-Library-of-Books - Flutter App - Animated Book Library

bookshelf A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Jan 2, 2022