@anubis609/astroanimate-core 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Astroanimate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,212 @@
+# astroanimate
+
+Astro-native animation components: **AnimatedButton**, **AnimatedCard**, **ExpandableCard**, **FadeInText**, **GlassCard**, **Loader**, **ProgressBar**, **RevealImage**, **ScaleIn**, **Tooltip**, and **TypewriterText**.
+
+## Install
+
+```bash
+npm install @astroanimate/core
+```
+
+## Quality Gates
+
+- `npm run build` builds ESM output into `dist/`
+- `npm run typecheck` runs `astro check` and TypeScript validation
+- `npm run lint` validates the package source and tooling config
+- `npm run test` runs the unit and contract test suite
+
+## Usage
+
+**Important:** Due to Astro's component resolution limitations, components must be imported via subpath exports. Named imports from the main barrel (e.g., `import { Tooltip } from "@astroanimate/core"`) will not work.
+
+### AnimatedButton
+
+CSS-first button effects with no hydration and a visible no-JS baseline.
+
+```astro
+---
+import AnimatedButton from "@astroanimate/core/AnimatedButton";
+---
+
+<AnimatedButton variant="shimmer">Explore</AnimatedButton>
+```
+
+### AnimatedCard
+
+Interactive card with lift, scale, shine, and flip effects.
+
+```astro
+---
+import AnimatedCard from "@astroanimate/core/AnimatedCard";
+---
+
+<AnimatedCard
+  title="Lift Card"
+  description="Hover to see the lift effect with ambient glow"
+  variant="lift"
+  color="rose"
+/>
+```
+
+### FadeInText
+
+Scroll-triggered fade-in with blur effect (opt-in enhancement).
+
+```astro
+---
+import FadeInText from "@astroanimate/core/FadeInText";
+---
+
+<FadeInText duration={0.6} delay={0} enhance={true}>
+  <h3>Fade In Text</h3>
+  <p>This text fades in with blur effect on page load.</p>
+</FadeInText>
+```
+
+> When `enhance=true`, the element starts hidden and waits for JavaScript to initialise the IntersectionObserver. If JS is slow to load, the element has a built-in 2s CSS fallback animation that fires automatically — ensuring content never stays permanently invisible. This means in slow-JS environments, users may see content appear after roughly 2 seconds before the scroll-trigger behaviour takes over.
+
+### Loader
+
+CSS-only loading indicators with multiple variants.
+
+```astro
+---
+import Loader from "@astroanimate/core/Loader";
+---
+
+<Loader type="spinner" size={40} color="#3b82f6" />
+<Loader type="dots" size={40} color="#10b981" />
+<Loader type="pulse" size={40} color="#f59e0b" />
+```
+
+### Tooltip
+
+Hover-based tooltip with positioning options and optional enhancement.
+
+```astro
+---
+import Tooltip from "@astroanimate/core/Tooltip";
+---
+
+<Tooltip content="Tooltip on top" position="top">
+  <button>Hover me</button>
+</Tooltip>
+```
+
+### ScaleIn
+
+Scale-in animation with optional JS enhancement.
+
+```astro
+---
+import ScaleIn from "@astroanimate/core/ScaleIn";
+---
+
+<ScaleIn enhance duration={0.6} delay={0}>
+  <h3>Scale In Content</h3>
+  <p>This content scales in when scrolled into view.</p>
+</ScaleIn>
+```
+
+### TypewriterText
+
+Typewriter effect with optional JS enhancement.
+
+```astro
+---
+import TypewriterText from "@astroanimate/core/TypewriterText";
+---
+
+<TypewriterText text="Hello, World!" enhance speed={50} />
+```
+
+### GlassCard
+
+Glassmorphism UI with 3D tilt effect and dynamic glare.
+
+```astro
+---
+import GlassCard from "@astroanimate/core/GlassCard";
+---
+
+<GlassCard
+  title="Glassmorphism UI"
+  subtitle="A New Design Trend"
+  description="This card uses the glassmorphism effect to create a sense of depth and transparency."
+  enableTilt={true}
+  tiltIntensity={10}
+/>
+```
+
+### ExpandableCard
+
+Expandable/collapsible card with CSS baseline and optional JS enhancement.
+
+```astro
+---
+import ExpandableCard from "@astroanimate/core/ExpandableCard";
+---
+
+<ExpandableCard
+  title="Expandable Card"
+  subtitle="Click to expand"
+  initialOpen={false}
+  enhance={true}
+  duration={300}
+>
+  <p>This content can be expanded and collapsed.</p>
+</ExpandableCard>
+```
+
+### ProgressBar
+
+Progress bar with size variants (small, medium, large).
+
+```astro
+---
+import ProgressBar from "@astroanimate/core/ProgressBar";
+---
+
+<ProgressBar value={75} max={100} label="Loading" size="medium" color="#3b82f6" />
+```
+
+### RevealImage
+
+Text with two images that reveal on hover (pure CSS).
+
+```astro
+---
+import RevealImage from "@astroanimate/core/RevealImage";
+---
+
+<RevealImage
+  text="Hover Me"
+  image1="/path/to/image1.jpg"
+  image2="/path/to/image2.jpg"
+  alt="Reveal images"
+/>
+```
+
+## Exports
+
+| Import                              | Component            |
+| ----------------------------------- | -------------------- |
+| `@astroanimate/core/AnimatedButton` | AnimatedButton.astro |
+| `@astroanimate/core/AnimatedCard`   | AnimatedCard.astro   |
+| `@astroanimate/core/ExpandableCard` | ExpandableCard.astro |
+| `@astroanimate/core/FadeInText`     | FadeInText.astro     |
+| `@astroanimate/core/GlassCard`      | GlassCard.astro      |
+| `@astroanimate/core/Loader`         | Loader.astro         |
+| `@astroanimate/core/ProgressBar`    | ProgressBar.astro    |
+| `@astroanimate/core/RevealImage`    | RevealImage.astro    |
+| `@astroanimate/core/ScaleIn`        | ScaleIn.astro        |
+| `@astroanimate/core/Tooltip`        | Tooltip.astro        |
+| `@astroanimate/core/TypewriterText` | TypewriterText.astro |
+
+## Peer dependency
+
+- **astro** `^4.0.0 || ^5.0.0`
+
+## License
+
+MIT

package/dist/components/AnimatedBorderButton/AnimatedBorderButton.astro

@@ -0,0 +1,129 @@
+---
+interface Props {
+  as?: "button" | "a";
+  href?: string;
+  type?: "button" | "submit" | "reset";
+  class?: string;
+}
+
+const {
+  as = "button",
+  href,
+  type = "button",
+  class: className = "",
+} = Astro.props;
+
+const Tag = as === "a" ? "a" : "button";
+---
+
+<style>
+  /* ✅ CRITERION 7: CSS-FIRST (all visuals handled here) */
+  [data-abb] {
+    --border-radius: 15px;
+    --border-width: 4px;
+
+    appearance: none;
+    position: relative;
+    padding: 1em 2em;
+    border: 0;
+    background-color: #ffffff;
+    font-family: "Roboto", Arial, "Segoe UI", sans-serif;
+    font-size: 18px;
+    font-weight: 500;
+    color: #000;
+    z-index: 2;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  /* ✅ CRITERION 1: visible baseline without JS */
+  [data-abb]::after {
+    --m-i: linear-gradient(#000, #000);
+    --m-o: content-box, padding-box;
+
+    content: "";
+    position: absolute;
+    inset: 0;
+    padding: var(--border-width);
+    border-radius: var(--border-radius);
+
+    background-image: conic-gradient(
+      #488cfb,
+      #29dbbc,
+      #ddf505,
+      #ff9f0e,
+      #e440bb,
+      #655adc,
+      #488cfb
+    );
+
+    -webkit-mask-image: var(--m-i), var(--m-i);
+    mask-image: var(--m-i), var(--m-i);
+    -webkit-mask-origin: var(--m-o);
+    mask-origin: var(--m-o);
+    -webkit-mask-clip: var(--m-o);
+    mask-composite: exclude;
+    -webkit-mask-composite: destination-out;
+
+    filter: hue-rotate(0);
+
+    /* Animation defined but paused */
+    animation: abb-rotate-hue linear 500ms infinite;
+    animation-play-state: paused;
+  }
+
+  /* Hover interaction */
+  [data-abb]:hover::after {
+    animation-play-state: running;
+  }
+
+  /* Active state */
+  [data-abb]:active {
+    --border-width: 5px;
+  }
+
+  /* Focus accessibility */
+  [data-abb]:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 4px;
+  }
+
+  /* Box sizing */
+  [data-abb],
+  [data-abb]::after {
+    box-sizing: border-box;
+  }
+
+  /* Animation */
+  @keyframes abb-rotate-hue {
+    to {
+      filter: hue-rotate(1turn);
+    }
+  }
+
+  /* ✅ CRITERION 6: REDUCED MOTION (ALL animations disabled) */
+  @media (prefers-reduced-motion: reduce) {
+    [data-abb]::after {
+      animation: none !important;
+      filter: none !important;
+    }
+
+    [data-abb]:hover::after {
+      animation: none !important;
+    }
+  }
+</style>
+
+<!-- ✅ CRITERION 1: meaningful HTML content -->
+{
+  as === "a" ? (
+    <a data-abb href={href} class={className}>
+      <slot />
+    </a>
+  ) : (
+    <button data-abb type={type} class={className}>
+      <slot />
+    </button>
+  )
+}

package/dist/components/AnimatedBorderButton/index.js

@@ -0,0 +1,3 @@
+export { default } from './AnimatedBorderButton.astro';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/AnimatedBorderButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/components/AnimatedButton/AnimatedButton.astro

@@ -0,0 +1,299 @@
+---
+/**
+ * ✅ CRITERION 2: Zero Hydration
+ * No hydration directives used. Initial render independent of JS.
+ *
+ * ✅ CRITERION 8: JS Only Enhances
+ * This component is CSS-only by design (Zero JS requested).
+ * It provides a premium experience out-of-the-box.
+ */
+
+interface Props {
+  variant?: "shimmer" | "fill" | "border" | "none";
+  href?: string;
+  class?: string;
+  shimmerColor?: string;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+const {
+  variant = "none",
+  href,
+  class: className = "",
+  shimmerColor = "rgba(255, 255, 255, 0.4)",
+  disabled = false,
+  ...rest
+} = Astro.props;
+
+// Prop validation
+const validVariants = ["shimmer", "fill", "border", "none"] as const;
+const validatedVariant = validVariants.includes(variant as any)
+  ? variant
+  : "none";
+
+// Validate shimmerColor is a valid CSS color format
+const isValidColor = (color: string): boolean => {
+  // Accepts: hex, rgb, rgba, hsl, hsla, and named colors
+  return /^(#([0-9a-fA-F]{3}){1,2}|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+(\s*,\s*[\d.]+)?\s*\)|hsla?\(\s*[\d.]+\s*,\s*[\d.]+%\s*,\s*[\d.]+%(\s*,\s*[\d.]+)?\s*\)|[a-zA-Z][a-zA-Z0-9\s]*)$/.test(
+    color,
+  );
+};
+const validatedShimmerColor = isValidColor(shimmerColor)
+  ? shimmerColor
+  : "rgba(255, 255, 255, 0.4)";
+
+// Validate href if provided
+const validatedHref = href && href.trim() !== "" ? href : undefined;
+
+const Tag = validatedHref ? "a" : "button";
+
+// Helper for variant classes
+const variantClasses = {
+  shimmer: "button-shimmer",
+  fill: "button-fill",
+  border: "button-border",
+  none: "",
+};
+
+const activeVariantClass = variantClasses[validatedVariant] || "";
+---
+
+<!-- ✅ CRITERION 1: Visible Without JS --><!-- Meaningful HTML content exists and is visible at baseline -->
+<Tag
+  href={validatedHref}
+  type={validatedHref ? undefined : "button"}
+  class:list={[
+    "animated-button",
+    activeVariantClass,
+    className,
+    disabled && "disabled",
+  ]}
+  data-astro-animated-button
+  data-variant={validatedVariant}
+  style={validatedVariant === "shimmer"
+    ? `--shimmer-color: ${validatedShimmerColor};`
+    : ""}
+  disabled={disabled}
+  {...rest}
+>
+  <span class="button-content">
+    <slot />
+  </span>
+
+  {
+    validatedVariant === "shimmer" && (
+      <span class="shimmer-effect" aria-hidden="true" />
+    )
+  }
+  {
+    validatedVariant === "fill" && (
+      <span class="fill-effect" aria-hidden="true" />
+    )
+  }
+  {
+    validatedVariant === "border" && (
+      <>
+        <span class="border-line border-line-top" aria-hidden="true" />
+        <span class="border-line border-line-right" aria-hidden="true" />
+        <span class="border-line border-line-bottom" aria-hidden="true" />
+        <span class="border-line border-line-left" aria-hidden="true" />
+      </>
+    )
+  }
+</Tag>
+
+<style>
+  .button-content {
+    position: relative;
+    z-index: 10;
+  }
+
+  /* --- BASE STYLES --- */
+  .animated-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    cursor: pointer;
+    text-decoration: none;
+    border: 1px solid #ccc;
+    background: white;
+    color: #111;
+    font: inherit;
+    transition: all 0.3s ease;
+    z-index: 0;
+    padding: 1rem 1rem;
+    border-radius: 0.5em;
+  }
+
+  .animated-button:hover {
+    border-color: #999;
+  }
+
+  .animated-button:focus-visible {
+    outline: 2px solid #667eea;
+    outline-offset: 2px;
+  }
+
+  .animated-button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .animated-button.disabled:hover {
+    border-color: #ccc;
+  }
+
+  /* --- SHIMMER VARIANT --- */
+  .button-shimmer {
+    background: #111;
+    color: white;
+    border-color: #111;
+  }
+
+  .shimmer-effect {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--shimmer-color, rgba(255, 255, 255, 0.4)),
+      transparent
+    );
+    transform: translateX(-100%);
+    pointer-events: none;
+  }
+
+  /* ✅ CRITERION 7: CSS-First (Hover triggered by CSS) */
+  .button-shimmer:not(.disabled):hover .shimmer-effect {
+    animation: shimmer 1.5s infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  /* --- FILL VARIANT --- */
+  .button-fill {
+    border: 1px solid currentColor;
+    color: #111;
+    background: transparent;
+  }
+
+  .fill-effect {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background: currentColor;
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  /* ✅ CRITERION 7: CSS-First */
+  .button-fill:not(.disabled):hover .fill-effect {
+    transform: scaleX(1);
+  }
+
+  .button-fill:not(.disabled):hover .button-content {
+    color: white; /* Basic inversion for visibility */
+    mix-blend-mode: difference;
+    transition: color 0.4s ease;
+  }
+
+  /* --- BORDER VARIANT --- */
+  .button-border {
+    padding: 0.5rem 1rem;
+    color: white;
+    background: #111;
+  }
+
+  .border-line {
+    position: absolute;
+    background: white;
+    z-index: 5;
+    transition: transform 0.3s ease;
+  }
+
+  .border-line-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+
+  .border-line-right {
+    top: 0;
+    right: 0;
+    width: 2px;
+    height: 100%;
+    transform: scaleY(0);
+    transform-origin: top;
+    transition-delay: 0.05s;
+  }
+
+  .border-line-bottom {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 2px;
+    transform: scaleX(0);
+    transform-origin: right;
+    transition-delay: 0.1s;
+  }
+
+  .border-line-left {
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    height: 100%;
+    transform: scaleY(0);
+    transform-origin: bottom;
+    transition-delay: 0.15s;
+  }
+
+  /* ✅ CRITERION 7: CSS-First */
+  .button-border:not(.disabled):hover .border-line-top {
+    transform: scaleX(1);
+  }
+  .button-border:not(.disabled):hover .border-line-right {
+    transform: scaleY(1);
+  }
+  .button-border:not(.disabled):hover .border-line-bottom {
+    transform: scaleX(1);
+  }
+  .button-border:not(.disabled):hover .border-line-left {
+    transform: scaleY(1);
+  }
+
+  /* ✅ CRITERION 6: Reduced Motion Respected */
+  /* ALL animations and transitions wrapped or overridden */
+  @media (prefers-reduced-motion: reduce) {
+    .animated-button,
+    .shimmer-effect,
+    .fill-effect,
+    .border-line,
+    .button-content {
+      transition: none !important;
+      animation: none !important;
+      transform: none !important;
+    }
+
+    /* Fallback states for reduced motion visibility */
+    .button-fill:hover {
+      background: #111;
+      color: white;
+    }
+  }
+</style>

package/dist/components/AnimatedButton/index.js

@@ -0,0 +1,3 @@
+export { default } from './AnimatedButton.astro';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/AnimatedButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}