diff --git a/src/design-system/atoms/sparkle/Sparkle.stories.tsx b/src/design-system/atoms/sparkle/Sparkle.stories.tsx
new file mode 100644
index 0000000..7fe30cd
--- /dev/null
+++ b/src/design-system/atoms/sparkle/Sparkle.stories.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { SparkleOverlay } from "./Sparkle";
+import { Button } from "roleypoly/src/design-system/atoms/button";
+import { Hero } from "roleypoly/src/design-system/atoms/hero";
+
+export default {
+  title: "Atoms/Sparkle",
+  component: SparkleOverlay,
+  args: {
+    size: -10,
+    opacity: 1,
+    repeatCount: 3,
+  },
+};
+
+export const ExampleButton = (args) => (
+  <Hero>
+    <SparkleOverlay {...args}>
+      <Button>Yo check this!</Button>
+    </SparkleOverlay>
+  </Hero>
+);
diff --git a/src/design-system/atoms/sparkle/Sparkle.story.tsx b/src/design-system/atoms/sparkle/Sparkle.story.tsx
deleted file mode 100644
index fd20c98..0000000
--- a/src/design-system/atoms/sparkle/Sparkle.story.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { atomStories } from 'atoms/atoms.story';
-import { SparkleOverlay } from './Sparkle';
-import { Button } from 'atoms/button';
-import { number } from '@storybook/addon-knobs';
-import { Hero } from 'atoms/hero';
-
-const story = atomStories('Sparkle', module);
-
-story.add('Example Button', () => {
-    return (
-        <Hero>
-            <SparkleOverlay
-                opacity={number('Effect Opacity', 1, {
-                    min: 0,
-                    max: 1,
-                    step: 0.001,
-                    range: true,
-                })}
-                size={number('Effect Size', -10)}
-                repeatCount={3}
-            >
-                <Button>Yo check this!</Button>
-            </SparkleOverlay>
-        </Hero>
-    );
-});