{
+ let state = use_signal(|| AnimationState::new(initial));
+ Motion::new(state)
+}
+```
+This hook manages the animation state and provides a clean API for components.
+
+
+
+
+### Challenges & Solutions
+
+1. **Browser Compatibility**
+ - **Challenge**: Different browsers handle requestAnimationFrame differently
+ - **Solution**: Created a platform-agnostic timing system with fallbacks
+
+2. **State Management**
+ - **Challenge**: Keeping animations smooth during React-style rerenders
+ - **Solution**: Implemented a separate animation loop that runs independent of the render cycle
+
+3. **Type System Integration**
+ - **Challenge**: Making animations work with any type while maintaining type safety
+ - **Solution**: Created the `Animatable` trait with safe defaults:
+```rust
+pub trait Animatable: 'static + Copy + Send + Sync {
+ fn zero() -> Self;
+ fn epsilon() -> f32;
+ fn magnitude(&self) -> f32;
+ fn scale(&self, factor: f32) -> Self;
+ fn add(&self, other: &Self) -> Self;
+ fn sub(&self, other: &Self) -> Self;
+ fn interpolate(&self, target: &Self, t: f32) -> Self;
+}
+```
+
+## Showcase: Advanced Animation Examples
+
+### 3D Cube Animation
+The library supports complex 3D transformations, as demonstrated by this rotating cube example:
+
+```rust
+#[derive(Debug, Clone, Copy)]
+struct Transform3D {
+ rotate_x: f32,
+ rotate_y: f32,
+ rotate_z: f32,
+ translate_x: f32,
+ translate_y: f32,
+ scale: f32,
+}
+
+#[component]
+fn SwingingCube() -> Element {
+ let mut transform = use_motion(Transform3D::zero());
+
+ // Animate the cube with spring physics
+ transform.animate_to(
+ Transform3D::new(
+ PI / 3.0, // X rotation
+ PI / 2.0, // Y rotation
+ PI / 4.0, // Z rotation
+ 2.0, // X translation
+ -1.0, // Y translation
+ 1.2, // Scale
+ ),
+ AnimationConfig::new(AnimationMode::Spring(Spring {
+ stiffness: 35.0,
+ damping: 5.0,
+ mass: 1.0,
+ velocity: 2.0,
+ }))
+ .with_loop(LoopMode::Infinite),
+ );
+ // ...rest of the implementation
+}
+```
+
+### Animated Flower
+Another example showcasing organic animations with multiple coordinated elements:
+
+```rust
+#[derive(Debug, Clone, Copy)]
+struct PetalTransform {
+ rotate: f32,
+ scale: f32,
+ translate_x: f32,
+ translate_y: f32,
+}
+
+#[component]
+fn AnimatedFlower() -> Element {
+ let mut petal_transform = use_motion(PetalTransform::zero());
+ let mut center_scale = use_motion(0.0f32);
+
+ // Animate petals blooming
+ petal_transform.animate_to(
+ PetalTransform::new(PI / 4.0, 1.2, 3.0, 3.0),
+ AnimationConfig::new(AnimationMode::Spring(Spring {
+ stiffness: 60.0,
+ damping: 8.0,
+ mass: 0.5,
+ velocity: 1.0,
+ }))
+ .with_loop(LoopMode::Infinite),
+ );
+ // ...rest of the implementation
+}
+```
+
+## Roadmap and Future Development
+1. **Performance Enhancements**
+ - Implementation of batch animation updates
+ - WebAssembly-specific optimizations
+ - Advanced caching strategies
+
+2. **API Evolution**
+ - Direct DOM style manipulation integration
+ - Enhanced gesture support
+ - Animation composition utilities
+
+## Conclusion
+dioxus-motion represents a significant step forward for animation capabilities in the Rust ecosystem. While we've achieved our initial goals of creating a robust, physics-based animation system, this is just the beginning. We're excited to see how the community will use and enhance these tools to create more dynamic and engaging user interfaces.
+
+Ready to start animating? Visit our [GitHub repository](https://github.com/wheregmis/dioxus-motion) to contribute or try it out!
\ No newline at end of file
diff --git a/content/blog/markdown_render_test.md b/content/blog/markdown_render_test.md
new file mode 100644
index 0000000..616ce7e
--- /dev/null
+++ b/content/blog/markdown_render_test.md
@@ -0,0 +1,165 @@
++++
+title = "Markdown Render Test"
+date = "2024-03-15"
+description = ""
+image = "http://rustacean.net/assets/rustacean-flat-happy.png"
+tags = ["rust", "web-dev", "tutorial"]
++++
+
+# Markdown Feature Checklist
+
+- [x] **Headings (h1-h6)**
+- [x] **Links with hover effect**
+- [x] **Code blocks with copy button**
+- [x] **Ordered and unordered lists (nested)**
+- [x] **Task lists (checkboxes)**
+- [x] **Blockquotes**
+- [ ] **Tables with alternating row colors**
+- [x] **Horizontal rules**
+- [!] **Text formatting (bold, italic, strikethrough, highlighted)** strikethrough and highlighted is not working
+- [x] **Definition lists**
+- [ ] **Abbreviations with hover effect**
+- [x] **Keyboard shortcuts**
+- [x] **Subscript and superscript**
+- [x] **Details/Summary elements**
+- [ ] **Footnotes**
+
+---
+
+## 1. Headings Example
+
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+---
+
+## 2. Links with Hover Effect
+
+Hover over this link: [Example Link](# "This is a hover tooltip!")
+
+---
+
+## 3. Code Blocks with Copy Button
+
+
+
+function helloWorld() {
+ console.log("Hello, World!");
+}
+
+
+
+*(Implementation of the copy button may depend on your Markdown renderer or additional scripts.)*
+
+---
+
+## 4. Ordered and Unordered Lists (Nested)
+
+- Unordered item 1
+ - Nested unordered item A
+- Unordered item 2
+
+1. Ordered item 1
+ 1. Nested ordered item 1-A
+2. Ordered item 2
+
+---
+
+## 5. Task Lists (Checkboxes)
+
+- [ ] Unchecked task
+- [x] Checked task
+
+---
+
+## 6. Blockquotes
+
+> This is a blockquote.
+>
+> > Nested blockquote.
+
+---
+
+## 7. Tables with Alternating Row Colors
+
+| Column A | Column B | Column C |
+|----------|----------|----------|
+| Row 1A | Row 1B | Row 1C |
+| Row 2A | Row 2B | Row 2C |
+| Row 3A | Row 3B | Row 3C |
+
+*(Use CSS or your Markdown renderer’s settings for alternating row colors.)*
+
+---
+
+## 8. Horizontal Rules
+
+---
+
+Another rule:
+
+***
+
+---
+
+## 9. Text Formatting
+
+**Bold Text**
+*Italic Text*
+~~Strikethrough~~
+
+==Highlighted Text== (may depend on renderer)
+
+---
+
+## 10. Definition Lists
+
+Term 1
+: Definition for Term 1
+
+Term 2
+: Definition for Term 2
+
+---
+
+## 11. Abbreviations with Hover Effect
+
+Markdown allows abbreviations like `*[HTML]: HyperText Markup Language`
+
+Example: We are using HTML in our project.
+
+*[HTML]: HyperText Markup Language
+
+---
+
+## 12. Keyboard Shortcuts
+
+Press Ctrl + S to save.
+
+---
+
+## 13. Subscript and Superscript
+
+Subscript example: H2O
+Superscript example: 2nd
+
+---
+
+## 14. Details/Summary Elements
+
+
+Click to expand
+Inside details content
+
+
+---
+
+## 15. Footnotes
+
+Here is a sentence with a footnote.[^1]
+
+[^1]: This is the footnote content.
diff --git a/image.png b/image.png
deleted file mode 100644
index e143dc7..0000000
Binary files a/image.png and /dev/null differ
diff --git a/index.html b/index.html
index b0cfa29..c9abf68 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,11 @@
+
+
+
+
+
@@ -24,7 +29,8 @@
}
);
-
+
+