Tip
Visit the Shime Wiki for more information about Shime, including installation, usage, and documentation.
Shime is a module that allows you to easily create a shimmer effect on any GuiObject. Shime is easy to use and extremely customizable. Shime achieves this by using a UIGradient that is animated using a Tween. Shime will detect the GuiObject's size and position to apply the proper gradient to it and will clip to the guiobject's size including UICorners.
Note
Shimmer Demo has Content Sharing enabled. You can download the demo from the Roblox website by clicking the ellipsis (...)and selecting Edit.
We provide an open-source demo of Shime, you can view the demo on Roblox. Feel free to use the demo as a reference for how to use Shime and modify it to your liking.
Shime has a lot of features that allow you to customize the shimmer effect to your liking. Here are some of the features:
Shime uses a TweenService to animate the gradient. This allows you to customize the animation to your liking. You can change the time, style, direction, repeat count, and delay time. You can change the TweenInfo of the animation by using the Shime.new constructor and passing in the parameters you want to change.
Shime is extremely versatile, working on nearly all GuiObjects and allows easy customization through its class. You can use Shime on any GuiObject including TextButtons, TextLabels, ImageLabels, Frames, and more. Shime will automatically detect the GuiObject's size and position to apply the proper gradient to it and will clip to the guiobject's size including any UICorner instances.
Shime has its own GitHub Wiki with an included Getting Started page that will help you get started with Shime which includes multiple installation methods, usage guides, and real-world code samples. The wiki also includes a Documentation page with all the methods, properties, and constructors for Shime.
Note
Visit the Installation page more information on installation. Below is a quick summary of the installation methods.
Shime is easy to install. They are many ways to install Shime. The links below will take you to the installation method you want to use.
| Install Method | Asset Link |
|---|---|
| Install from Roblox | Shimmer - Creator Marketplace |
| Install from GitHub | Shime - GitHub |
Note
Visit the Usage page more information on usage, including additional code samples.
Shime is easy to use. The API is simple and easy to understand. Below is a simple code sample of how to create a shimmer effect on a GuiObject using Shime.
-- Require the Shime module
local Shime = require(game.ReplicatedStorage.Shime)
-- Create a new Shimmer and play it
local shimmer = Shime.new(script.Parent)
shimmer:Play()Note
Visit the Documentation page more information on the Shime module and more details about Shime Constructors, Methods, and Properties.
Shime has many methods and properties that allow you to customize the shimmer effect to your liking. Below is a summary of all the methods, properties, and constructors for Shime.
new(parent: GuiObject) |
|---|
Returns a table containing Shimmer's metatable. Shimmers using default parameters. |
new(parent: GuiObject, time: number?, style: EasingStyle?, direction: EasingDirection?, repeatCount: number?, reverses: boolean?, delayTime: number?) |
|---|
Returns a table containing Shimmer's metatable. Shimmers using specified parameters. |
| Property | Description |
|---|---|
PlaybackState: Enum.PlaybackState |
This read-only property will return Enum.PlaybackState. |
GetFrame(): Frame |
|---|
The GetFrame function returns the Frame that is used to create the shimmer effect. This frame can be customized after the shimmer is created. |
GetGradient(): UIGradient |
|---|
The GetGradient function returns the UIGradient that is used to create the shimmer effect. This gradient can be customized after the shimmer is created. |
Stop(): void |
|---|
The Stop function halts Shimmer. If Shimmer:Play() is called again the Shimmer will resume interpolating towards their destination but take the full length of the time to do so. |
Pause(): void |
|---|
The Pause function halts Shimmer. If you call Shimmer:Play() again, the shimmer resumes playback from the moment it was paused. |
Play(): void |
|---|
The Play function starts Shimmer. Note that if a shimmer has already begun calling Play will have no effect unless the shimmer has finished or has been stopped (either by Shimmer:Stop() or Shimmer:Pause(). |
We worked hard to make this open-source, so please contribute at your will. Go ahead and fork this repository, and maybe we will merge together someday.
If you have a change you want to make, please open a new pull request.
If you see a bug or want a feature, please open an issue.
To get started to go CONTRIBUTING.md on how to contribute.
Shime is licensed under Apache License 2.0. See LICENSE.txt for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent