react-sparkle
Version:
A React component to increase the number of sparkles in your app
75 lines • 32.5 kB
HTML
<html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.1"/><style data-href="/react-sparkle/styles.6eab8bca7e61c9e25075.css" data-identity="gatsby-global-css">body,html{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;margin:0;padding:0}pre{margin:0}.index-module--titleLink--6fc2a{display:block;margin:0 24px}.index-module--section--5f2f7{padding:24px}.index-module--exampleContainer--65b44{display:flex}.index-module--exampleTitle--9efcc{flex:0 0 100%}.index-module--codeContainer--ca3ab{flex:1 1;margin-right:24px}.index-module--codeBox--1dc31{margin-bottom:24px}.index-module--demo--82b14{align-items:center;display:flex;flex:1 1;justify-content:center;padding:96px 48px}.index-module--darkBackground--a6b41{background-color:#444}.index-module--lighterBackground--5484d{background-color:#f5f2f0}.index-module--sparkleTarget--3ff77{background:#00bdbd;height:140px;position:relative;width:140px}.index-module--sparkleTextTarget--2e3f9{position:relative}</style></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><a class="index-module--titleLink--6fc2a" href="https://github.com/kmjennison/react-sparkle"><h1>react-sparkle</h1></a><div style="padding-left:24px;padding-right:24px"><p style="margin:0">Version: <!-- -->2.0.0-alpha.0</p><p style="margin:0">React version: <!-- -->^18.2.0</p></div><div class="index-module--section--5f2f7"><h2 class="index-module--exampleTitle--9efcc">Simple</h2><div class="index-module--exampleContainer--65b44"><div class="index-module--codeContainer--ca3ab"><div class="index-module--codeBox--1dc31"><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-jsx" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token module" style="color:#07a">import</span><span> </span><span class="token imports maybe-class-name">Sparkles</span><span> </span><span class="token module" style="color:#07a">from</span><span> </span><span class="token" style="color:#690">'react-sparkle'</span><span>
</span>
<span></span><span class="token" style="color:#07a">const</span><span> </span><span class="token function-variable maybe-class-name" style="color:#DD4A68">Demo</span><span> </span><span class="token" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=</span><span> </span><span class="token" style="color:#999">(</span><span class="token" style="color:#999">)</span><span> </span><span class="token arrow" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=></span><span> </span><span class="token" style="color:#999">(</span><span>
</span><span> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#905">div</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">className</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">box</span><span class="token" style="color:#999">"</span><span class="token" style="color:#999">></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#DD4A68">Sparkles</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">flicker</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">false</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905"> </span><span class="token" style="color:#999">/></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"></</span><span class="token" style="color:#905">div</span><span class="token" style="color:#999">></span><span>
</span><span></span><span class="token" style="color:#999">)</span><span>
</span></code></pre></div><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-css" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token class" style="color:#690">.box</span><span> </span><span class="token" style="color:#999">{</span><span>
</span><span> </span><span class="token" style="color:#905">position</span><span class="token" style="color:#999">:</span><span> relative</span><span class="token" style="color:#999">;</span><span> </span><span class="token" style="color:slategray">/* mandatory */</span><span>
</span><span> </span><span class="token" style="color:#905">background</span><span class="token" style="color:#999">:</span><span> </span><span class="token hexcode color">#00bdbd</span><span class="token" style="color:#999">;</span><span>
</span><span> </span><span class="token" style="color:#905">width</span><span class="token" style="color:#999">:</span><span> </span><span class="token" style="color:#905">140</span><span class="token unit">px</span><span class="token" style="color:#999">;</span><span>
</span><span> </span><span class="token" style="color:#905">height</span><span class="token" style="color:#999">:</span><span> </span><span class="token" style="color:#905">140</span><span class="token unit">px</span><span class="token" style="color:#999">;</span><span>
</span><span></span><span class="token" style="color:#999">}</span><span>
</span></code></pre></div><div class="index-module--darkBackground--a6b41 index-module--demo--82b14"><div class="index-module--sparkleTarget--3ff77"><span style="width:100%;height:100%;overflow:visible;position:absolute;top:-20px;left:-20px;pointer-events:none"><canvas></canvas></span></div></div></div></div><div class="index-module--section--5f2f7"><h2 class="index-module--exampleTitle--9efcc">Different Color, Size, and Speed</h2><div class="index-module--exampleContainer--65b44"><div class="index-module--codeContainer--ca3ab"><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-jsx" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token module" style="color:#07a">import</span><span> </span><span class="token imports maybe-class-name">Sparkles</span><span> </span><span class="token module" style="color:#07a">from</span><span> </span><span class="token" style="color:#690">'react-sparkle'</span><span>
</span>
<span></span><span class="token" style="color:#07a">const</span><span> </span><span class="token function-variable maybe-class-name" style="color:#DD4A68">Demo</span><span> </span><span class="token" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=</span><span> </span><span class="token" style="color:#999">(</span><span class="token" style="color:#999">)</span><span> </span><span class="token arrow" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=></span><span> </span><span class="token" style="color:#999">(</span><span>
</span><span> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#905">div</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">className</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">box</span><span class="token" style="color:#999">"</span><span class="token" style="color:#999">></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#DD4A68">Sparkles</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">color</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">red</span><span class="token" style="color:#999">"</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">count</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">20</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">minSize</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">7</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">maxSize</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">12</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">overflowPx</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">80</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">fadeOutSpeed</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">30</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">flicker</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">false</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#999">/></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"></</span><span class="token" style="color:#905">div</span><span class="token" style="color:#999">></span><span>
</span><span></span><span class="token" style="color:#999">)</span><span>
</span></code></pre></div><div class="index-module--lighterBackground--5484d index-module--demo--82b14"><div class="index-module--sparkleTarget--3ff77"><span style="width:100%;height:100%;overflow:visible;position:absolute;top:-80px;left:-80px;pointer-events:none"><canvas></canvas></span></div></div></div></div><div class="index-module--section--5f2f7"><h2 class="index-module--exampleTitle--9efcc">Make Text Sparkle</h2><div class="index-module--exampleContainer--65b44"><div class="index-module--codeContainer--ca3ab"><div class="index-module--codeBox--1dc31"><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-jsx" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token module" style="color:#07a">import</span><span> </span><span class="token imports maybe-class-name">Sparkles</span><span> </span><span class="token module" style="color:#07a">from</span><span> </span><span class="token" style="color:#690">'react-sparkle'</span><span>
</span>
<span></span><span class="token" style="color:#07a">const</span><span> </span><span class="token function-variable maybe-class-name" style="color:#DD4A68">Demo</span><span> </span><span class="token" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=</span><span> </span><span class="token" style="color:#999">(</span><span class="token" style="color:#999">)</span><span> </span><span class="token arrow" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=></span><span> </span><span class="token" style="color:#999">(</span><span>
</span><span> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#905">span</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">className</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">container</span><span class="token" style="color:#999">"</span><span class="token" style="color:#999">></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#905">h4</span><span class="token" style="color:#999">></span><span class="token plain-text">I am so sparkly. Look at me go!</span><span class="token" style="color:#999"></</span><span class="token" style="color:#905">h4</span><span class="token" style="color:#999">></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#DD4A68">Sparkles</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">color</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">teal</span><span class="token" style="color:#999">"</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">overflowPx</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">8</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905"> </span><span class="token" style="color:#999">/></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"></</span><span class="token" style="color:#905">span</span><span class="token" style="color:#999">></span><span>
</span><span></span><span class="token" style="color:#999">)</span><span>
</span></code></pre></div><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-css" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token class" style="color:#690">.container</span><span> </span><span class="token" style="color:#999">{</span><span>
</span><span> </span><span class="token" style="color:#905">position</span><span class="token" style="color:#999">:</span><span> relative</span><span class="token" style="color:#999">;</span><span> </span><span class="token" style="color:slategray">/* mandatory */</span><span>
</span><span></span><span class="token" style="color:#999">}</span><span>
</span></code></pre></div><div class="index-module--lighterBackground--5484d index-module--demo--82b14"><span class="index-module--sparkleTextTarget--2e3f9"><h4>I am so sparkly. Look at me go!</h4><span style="width:100%;height:100%;overflow:visible;position:absolute;top:-8px;left:-8px;pointer-events:none"><canvas></canvas></span></span></div></div></div><div class="index-module--section--5f2f7"><h2 class="index-module--exampleTitle--9efcc">Permanent Sparkles</h2><div class="index-module--exampleContainer--65b44"><div class="index-module--codeContainer--ca3ab"><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-jsx" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token module" style="color:#07a">import</span><span> </span><span class="token imports maybe-class-name">Sparkles</span><span> </span><span class="token module" style="color:#07a">from</span><span> </span><span class="token" style="color:#690">'react-sparkle'</span><span>
</span>
<span></span><span class="token" style="color:#07a">const</span><span> </span><span class="token function-variable maybe-class-name" style="color:#DD4A68">Demo</span><span> </span><span class="token" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=</span><span> </span><span class="token" style="color:#999">(</span><span class="token" style="color:#999">)</span><span> </span><span class="token arrow" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=></span><span> </span><span class="token" style="color:#999">(</span><span>
</span><span> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#905">div</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">className</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">box</span><span class="token" style="color:#999">"</span><span class="token" style="color:#999">></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#DD4A68">Sparkles</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">color</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">purple</span><span class="token" style="color:#999">"</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">fadeOutSpeed</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">10</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">newSparkleOnFadeOut</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">false</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">flicker</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">flickerSpeed</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">fast</span><span class="token" style="color:#999">"</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">count</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">80</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#999">/></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"></</span><span class="token" style="color:#905">div</span><span class="token" style="color:#999">></span><span>
</span><span></span><span class="token" style="color:#999">)</span><span>
</span></code></pre></div><div class="index-module--lighterBackground--5484d index-module--demo--82b14"><div class="index-module--sparkleTarget--3ff77"><span style="width:100%;height:100%;overflow:visible;position:absolute;top:-20px;left:-20px;pointer-events:none"><canvas></canvas></span></div></div></div></div><div class="index-module--section--5f2f7"><h2 class="index-module--exampleTitle--9efcc">Box-sizing demo</h2><div class="index-module--exampleContainer--65b44"><div class="index-module--codeContainer--ca3ab"><pre style="color:black;background:#f5f2f0;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1em;margin:.5em 0;overflow:auto"><code class="language-jsx" style="color:black;background:none;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span>
</span><span></span><span class="token module" style="color:#07a">import</span><span> </span><span class="token imports maybe-class-name">Sparkles</span><span> </span><span class="token module" style="color:#07a">from</span><span> </span><span class="token" style="color:#690">'react-sparkle'</span><span>
</span>
<span></span><span class="token" style="color:#07a">const</span><span> </span><span class="token function-variable maybe-class-name" style="color:#DD4A68">Demo</span><span> </span><span class="token" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=</span><span> </span><span class="token" style="color:#999">(</span><span class="token" style="color:#999">)</span><span> </span><span class="token arrow" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">=></span><span> </span><span class="token" style="color:#999">(</span><span>
</span><span> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#905">div</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">className</span><span class="token attr-equals" style="color:#999">=</span><span class="token" style="color:#999">"</span><span class="token" style="color:#07a">box</span><span class="token" style="color:#999">"</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#690">style</span><span class="token script language-javascript script-punctuation" style="color:#905">=</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#999">{</span><span class="token script language-javascript" style="color:#905">
</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript literal-property" style="color:#905">boxSizing</span><span class="token script language-javascript" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">:</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript" style="color:#690">'border-box'</span><span class="token script language-javascript" style="color:#999">,</span><span class="token script language-javascript" style="color:#905">
</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript literal-property" style="color:#905">padding</span><span class="token script language-javascript" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">:</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript" style="color:#905">40</span><span class="token script language-javascript" style="color:#999">,</span><span class="token script language-javascript" style="color:#905">
</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript literal-property" style="color:#905">border</span><span class="token script language-javascript" style="color:#9a6e3a;background:hsla(0, 0%, 100%, .5)">:</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript" style="color:#690">'8px solid red'</span><span class="token script language-javascript" style="color:#905">
</span><span class="token script language-javascript" style="color:#905"> </span><span class="token script language-javascript" style="color:#999">}</span><span class="token script language-javascript" style="color:#999">}</span><span class="token" style="color:#905">
</span><span class="token" style="color:#905"> </span><span class="token" style="color:#999">></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"><</span><span class="token" style="color:#DD4A68">Sparkles</span><span class="token" style="color:#905"> </span><span class="token" style="color:#999">/></span><span class="token plain-text">
</span><span class="token plain-text"> </span><span class="token" style="color:#999"></</span><span class="token" style="color:#905">div</span><span class="token" style="color:#999">></span><span>
</span><span></span><span class="token" style="color:#999">)</span><span>
</span></code></pre></div><div class="index-module--darkBackground--a6b41 index-module--demo--82b14"><div class="index-module--sparkleTarget--3ff77" style="box-sizing:border-box;padding:40px;border:8px solid red"><span style="width:100%;height:100%;overflow:visible;position:absolute;top:-20px;left:-20px;pointer-events:none"><canvas></canvas></span></div></div></div></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/";window.___webpackCompilationHash="cd67b9fdd25345906e6b";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"polyfill":["/polyfill-4c8794f2fcef5dd7c5b2.js"],"app":["/app-a46019b1d91f5d8a3731.js"],"component---src-pages-index-js":["/component---src-pages-index-js-cbda03b8cbf311ac0c29.js"]};/*]]>*/</script><script src="/react-sparkle/polyfill-4c8794f2fcef5dd7c5b2.js" nomodule=""></script><script src="/react-sparkle/app-a46019b1d91f5d8a3731.js" async=""></script><script src="/react-sparkle/framework-2ce0f657b3e8e7a4afcd.js" async=""></script><script src="/react-sparkle/webpack-runtime-a39298d66aebcbfff42e.js" async=""></script></body></html>