Loading
Animated Background Stripes Effect 12 exercises
explainer

Where to Go From Here

Congratulations, you've completed this tutorial. From here, there are many places that you could go!

Convert a color modifier to use the Match Utilities API

One thing you could do is convert a color modifier to use the Match Utilities API. Even without adding any values, you'd still have acce

Loading explainer

Transcript

0:01 Congratulations. You've completed this tutorial. From here, there are many places that you could go. One thing you could do is convert our color modifier to use the matchUtilities API. Even without adding any values, you'd still have access to the arbitrary values, which lets you pass any color that you want.

0:16 If you don't like this RGB format that you have to pass, you could write a function that takes a hex color, for example, and then abstracts the R, G, and B channels for you. You could also imagine passing the entire Tailwind colors object. You've just got to make sure that the colors are flattened and you only keep the ones that are actual hex colors.

0:33 Another thing you could do is allow the users to set the default options for the stripes, so maybe if they want to make them white and XL by default. To do that, you could use the plugin.withOptions API that lets you pass options when you register the plugin

0:47 Finally, if you wanted to customize the stripes even more, you could add a modifier for the animation duration and maybe the direction as well, make them go backwards and slow or forward and really fast. I think there's plenty of opportunities to expand this plugin further and continue exploring.

1:04 I hope you enjoyed this tutorial. Thank you so much for your support. I will see you around. Bye.