keyframekit 1.0.0 → 1.0.1

package/README.md

@@ -1,7 +1,10 @@
 # [KeyframeKit](https://keyframekit.berryscript.com)
 
 Intuitive, powerful and performant tools for working with CSS animations in JavaScript.  
-Powered by the [Web Animations API][1].
+
+## About
+
+While working with the [Web Animations API][1], I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So, I wrote a typed, spec-compliant library to convert. Along the way, I also added some other useful utilities for working with the API.
 
 ## Installation
 
@@ -54,9 +57,28 @@ await attachedAnim.finished;
 ```
 [...and more.][2]
 
+### Importing a stylesheet directly
+
+Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
+
+```js
+import KeyframeKit from 'keyframekit';
+
+const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
+
+// get animation keyframes from stylesheet
+const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate-small',
+  in: styleSheet
+});
+```
+
+> Note: `@import` rules won't be resolved in stylesheets imported in this way. [More info.][3]
+
 ### Defining animations in JS
 
-This is useful for when you want to have all your animation code in one place.
+The `KeyframeEffectParameters` class provides a more convenient way to define your animations in JS than is offered natively.  
+It's useful for when you want to have all your animation code in one place.
 
 ```js
 import { KeyframeEffectParameters } from 'keyframekit';
@@ -87,24 +109,6 @@ const attachedAnim = linkTextHoverAnim.toAnimation({
 attachedAnim.play();
 ```
 
-### Importing a stylesheet directly
-
-Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
-
-```js
-import KeyframeKit from 'keyframekit';
-
-const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
-
-// get animation keyframes from stylesheet
-const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
-  of: 'rotate-small',
-  in: styleSheet
-});
-```
-
-> Note: `@import` rules won't be resolved in stylesheets imported in this way. [More info.][3]
-
 ### Full reference
 [See here.](/reference)
 

package/docs/.vitepress/config.ts

@@ -11,10 +11,15 @@ export default defineConfig({
     //'reference/:slug*': ':slug*'
   },
 
-  head: [['link', { rel: 'icon', href: '/icon.png' }]],
+  head: [
+    ['link', { rel: 'icon', href: '/icon.png' }],
+    ['meta', { property: 'og:image', content: '/og-image.png' }],
+    ['meta', { name: 'keywords', content: 'css,js,javascript,animation,keyframe,stylesheet,framework,tools,performance,typescript' }]
+  ],
     
   title: "KeyframeKit",
-  description: "Test",
+  description: "Intuitive, powerful and performant tools for working with CSS animations in JavaScript.",
+
   themeConfig: {
     outline: [2, 3],
 

package/docs/docs/index.md

@@ -16,6 +16,10 @@ hero:
 
 <Playground/>
 
+## About
+
+While working with the [Web Animations API][1], I was surprised there wasn't an easy way to import animation keyframes directly from your CSS. You had to re-define them in JS, using a completely different format. So, I wrote a typed, spec-compliant library to convert. Along the way, I also added some other useful utilities for working with the API.
+
 ## Installation
 
 ::: code-group
@@ -68,9 +72,28 @@ await attachedAnim.finished;
 ```
 [...and more.][2]
 
+### Importing a stylesheet directly
+
+Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
+
+```js
+import KeyframeKit from 'keyframekit';
+
+const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
+
+// get animation keyframes from stylesheet
+const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
+  of: 'rotate-small',
+  in: styleSheet
+});
+```
+
+> Note: `@import` rules won't be resolved in stylesheets imported in this way. [More info.][3]
+
 ### Defining animations in JS
 
-This is useful for when you want to have all your animation code in one place.
+The `KeyframeEffectParameters` class provides a more convenient way to define your animations in JS than is offered natively.  
+It's useful for when you want to have all your animation code in one place.
 
 ```js
 import { KeyframeEffectParameters } from 'keyframekit';
@@ -101,24 +124,6 @@ const attachedAnim = linkTextHoverAnim.toAnimation({
 attachedAnim.play();
 ```
 
-### Importing a stylesheet directly
-
-Instead of getting an animation from the document's stylesheets, you can also import it directly from a CSS file.
-
-```js
-import KeyframeKit from 'keyframekit';
-
-const styleSheet = await KeyframeKit.importStyleSheet('./styles.css');
-
-// get animation keyframes from stylesheet
-const rotateSmallAnimKeyframes = KeyframeKit.getStyleSheetKeyframes({
-  of: 'rotate-small',
-  in: styleSheet
-});
-```
-
-> Note: `@import` rules won't be resolved in stylesheets imported in this way. [More info.][3]
-
 ### Full reference
 [See here.](/reference/index.md)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keyframekit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Intuitive, powerful and performant tools for working with CSS animations in JavaScript.",
   "main": "./dist/KeyframeKit.js",
   "scripts": {
@@ -34,4 +34,4 @@
   "devDependencies": {
     "typescript": "^5.9.3"
   }
-}
+}