Merge pull request #56 from ruru-m07/feat/animation

feat(ui): add animations to components

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: ruru-m07

CONTRIBUTING.md

@@ -1,6 +1,43 @@
-# Contribution Guidelines
+## Contribution Guidelines
 
-Welcome to our project! We appreciate your interest in contributing. Before you get started, please take a moment to review the following guidelines.
+Thank you for your interest in contributing to this project! We're excited to have you collaborate with us.
+Before you dive in, please take a moment to review these guidelines.
+
+### General Guidelines
+
+This project is organized as a monorepo and utilizes Turborepo, pnpm, and
+[Changesets](https://github.com/changesets/changesets).
+
+#### Before You Submit
+
+- Ensure there are no existing pull requests (PRs) that address the same issue or feature.
+- Format your code using `pnpm run prettier`.
+- Document your changes by running `pnpm changeset` to create a changeset.
+- Execute unit tests with `pnpm test` and update any snapshots as needed.
+
+#### Adding New Features
+
+If you plan to add a new feature, please open an issue first (Feature Request) with detailed information and justification for the feature.
+Once the feature request is approved, feel free to proceed with your pull request.
+
+#### Fixing Bugs
+
+When fixing a bug, include a thorough description of the issue, along with a live demo if possible.
+Alternatively, you can submit a bug report and reference it in your PR.
+
+#### Contributing to Documentation
+
+Improving documentation is always welcome. Please check for any typos or grammatical errors before submitting changes.
+
+### New to Open Source?
+
+A great way to start contributing is by working on documentation.
+The documentation files can be found in `/apps/docs/content/docs`.
+
+To preview the documentation site in development mode,
+first build the necessary dependencies using `pnpm run build --filter=./packages/*`, then start the development server with `pnpm run dev --filter=docs`.
+
+No extra environment variables are required to run this project.
 
 ## Code of Conduct
 

apps/www/app/global.css

@@ -18,6 +18,10 @@
   --headless-color: 250 80% 54%;
   --mdx-color: 0 0% 9%;
   --ui-color: 220deg 91% 54%;
+  --shiki-light: #4c4f69;
+  --shiki-dark: #cdd6f4;
+  --shiki-light-bg: #eff1f5;
+  --shiki-dark-bg: #0f0f0f !important;
 }
 
 .dark {
@@ -49,8 +53,12 @@
   --card: 230 40% 26.3% !important;
 }
 
+/* #nd-docs-layout {
+  background: var(--popover);
+} */
+
 .words_width_animat {
-  animation: words_width_animation 4s normal;
+  animation: words_width_animation 2.5s normal;
 }
 
 .words_width_lens_body {
@@ -66,11 +74,11 @@
 }
 
 .words_interfaces::after {
-  animation: words_interfaces_after_animation 3.5s normal;
+  animation: words_interfaces_after_animation 1.5s normal;
 }
 
 .words_interfaces::before {
-  animation: words_interfaces_before_animation 3.5s normal;
+  animation: words_interfaces_before_animation 1.5s normal;
 }
 
 @keyframes words_width_animation {
@@ -82,6 +90,10 @@
     top: -28px;
     opacity: 0.5;
   }
+  75% {
+    top: -28px;
+    opacity: 1;
+  }
   100% {
     top: -28px;
     opacity: 1;
@@ -126,10 +138,10 @@
     width: 0;
     opacity: 0;
   }
-  65% {
+  /* 65% {
     width: 205px;
     opacity: 0.5;
-  }
+  } */
   100% {
     width: 205px;
     opacity: 1;
@@ -141,10 +153,10 @@
     height: 0;
     opacity: 0;
   }
-  65% {
+  /* 65% {
     height: 60px;
     opacity: 0.5;
-  }
+  } */
   100% {
     height: 60px;
     opacity: 1;

apps/www/app/layout.tsx

@@ -4,7 +4,11 @@ import { RootProvider } from "fumadocs-ui/provider";
 import type { Viewport } from "next";
 import { GeistSans } from "geist/font/sans";
 import type { ReactNode } from "react";
+import { RuruProvider } from "ruru-ui/provider";
 import "fumadocs-ui/style.css";
+import "fumadocs-ui/twoslash.css";
+import { ScrollArea } from "@/components/scroll-area";
+import { Analytics } from "@vercel/analytics/react";
 
 export const metadata = createMetadata({
   title: {
@@ -27,7 +31,12 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={GeistSans.className} suppressHydrationWarning>
       <body>
-        <RootProvider>{children}</RootProvider>
+        <Analytics />
+        <RootProvider>
+          <RuruProvider disableBaseColor>
+            <ScrollArea className="h-screen">{children}</ScrollArea>
+          </RuruProvider>
+        </RootProvider>
       </body>
     </html>
   );