create-vexcms 0.1.0-alpha.2 → 0.1.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vexcms",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "Scaffold a new VexCMS project",
   "keywords": [
     "cms",

package/templates/base-nextjs/README.md

@@ -31,9 +31,17 @@ NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud
 NEXT_PUBLIC_CONVEX_SITE_URL=https://your-deployment.convex.site
 ```
 
-Then, in the [Convex Dashboard](https://dashboard.convex.dev) → Settings →
-Environment Variables, add `BETTER_AUTH_SECRET` (same value as `.env.local`)
-and `SITE_URL` (`http://localhost:3010` for local dev).
+Better Auth runs inside your Convex deployment, not in the Next.js server —
+it does **not** read `.env.local`. Set the same two values on the
+deployment itself:
+
+```bash
+npx convex env set SITE_URL http://localhost:3010
+npx convex env set BETTER_AUTH_SECRET <the BETTER_AUTH_SECRET value from .env.local>
+```
+
+Skipping this step is the most common cause of a `403` on your first sign-in
+attempt.
 
 ### 4. Run the dev servers
 

package/templates/base-nextjs/convex/tsconfig.json

@@ -8,16 +8,16 @@
     "allowSyntheticDefaultImports": true,
     "target": "ESNext",
     "lib": ["ES2023", "dom", "dom.iterable"],
+    "types": ["node"],
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
     "isolatedModules": true,
     "noEmit": true,
-    "baseUrl": ".",
     "paths": {
       "~/*": ["../src/*"],
       "@convex/*": ["./*"]
     }
   },
-  "include": ["./**/*"],
+  "include": ["./**/*", "../src/vex.types.ts"],
   "exclude": ["./_generated"]
 }

package/templates/base-nextjs/package.json

@@ -24,18 +24,17 @@
     "@t3-oss/env-nextjs": "0.13.11",
     "@tanstack/react-form": "1.33.1",
     "@tanstack/react-query": "5.101.2",
-    "@vexcms/better-auth": "~0.1.0-alpha.2",
-    "@vexcms/core": "~0.1.0-alpha.2",
-    "@vexcms/file-storage-convex": "~0.1.0-alpha.2",
-    "@vexcms/next": "~0.1.0-alpha.2",
-    "@vexcms/react": "~0.1.0-alpha.2",
+    "@vexcms/better-auth": "~0.1.0-alpha.3",
+    "@vexcms/core": "~0.1.0-alpha.3",
+    "@vexcms/file-storage-convex": "~0.1.0-alpha.3",
+    "@vexcms/next": "~0.1.0-alpha.3",
+    "@vexcms/react": "~0.1.0-alpha.3",
     "better-auth": "1.6.23",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "convex": "1.44.0",
     "convex-helpers": "0.1.120",
     "lucide-react": "0.577.0",
-    "motion": "13.1.1",
     "next": "16.3.3",
     "nuqs": "2.9.0",
     "react": "19.2.7",
@@ -53,7 +52,7 @@
     "@types/node": "20.19.43",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vexcms/cli": "~0.1.0-alpha.2",
+    "@vexcms/cli": "~0.1.0-alpha.3",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.9",

package/templates/marketing-site/src/components/motion-primitives/animated-group.tsx

@@ -1,138 +1,62 @@
-"use client"
+import React, { type ComponentPropsWithRef, type CSSProperties } from "react"
 
-import { motion, type Variants } from "motion/react"
-import React, { type ComponentPropsWithRef } from "react"
+import { cn } from "~/lib/utils"
 
-export type PresetType =
-  | "blur"
-  | "blur-slide"
-  | "bounce"
-  | "fade"
-  | "flip"
-  | "rotate"
-  | "scale"
-  | "slide"
-  | "swing"
-  | "zoom"
+import styles from "./reveal.module.css"
 
 export type AnimatedGroupProps = ComponentPropsWithRef<"div"> & {
   as?: React.ElementType
-  asChild?: React.ElementType
-  className?: string
-  preset?: PresetType
-  variants?: {
-    container?: Variants
-    item?: Variants
-  }
+  /** Seconds before the first child starts animating. */
+  delay?: number
+  /** Seconds between each child's start. */
+  stagger?: number
 }
 
-const defaultContainerVariants: Variants = {
-  visible: {
-    transition: {
-      staggerChildren: 0.1,
-    },
-  },
-}
-
-const defaultItemVariants: Variants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1 },
-}
-
-const presetVariants: Record<PresetType, Variants> = {
-  "blur-slide": {
-    hidden: { filter: "blur(4px)", y: 20 },
-    visible: { filter: "blur(0px)", y: 0 },
-  },
-  slide: {
-    hidden: { y: 20 },
-    visible: { y: 0 },
-  },
-  blur: {
-    hidden: { filter: "blur(4px)" },
-    visible: { filter: "blur(0px)" },
-  },
-  bounce: {
-    hidden: { y: -50 },
-    visible: {
-      transition: { type: "spring", damping: 10, stiffness: 400 },
-      y: 0,
-    },
-  },
-  fade: {},
-  flip: {
-    hidden: { rotateX: -90 },
-    visible: {
-      rotateX: 0,
-      transition: { type: "spring", damping: 20, stiffness: 300 },
-    },
-  },
-  rotate: {
-    hidden: { rotate: -180 },
-    visible: {
-      rotate: 0,
-      transition: { type: "spring", damping: 15, stiffness: 200 },
-    },
-  },
-  scale: {
-    hidden: { scale: 0.8 },
-    visible: { scale: 1 },
-  },
-  swing: {
-    hidden: { rotate: -10 },
-    visible: {
-      rotate: 0,
-      transition: { type: "spring", damping: 8, stiffness: 300 },
-    },
-  },
-  zoom: {
-    hidden: { scale: 0.5 },
-    visible: {
-      scale: 1,
-      transition: { type: "spring", damping: 20, stiffness: 300 },
-    },
-  },
-}
-
-const addDefaultVariants = (variants: Variants) => ({
-  hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
-  visible: { ...defaultItemVariants.visible, ...variants.visible },
-})
-
-function AnimatedGroup({
-  as = "div",
-  asChild = "div",
+/**
+ * Staggers a blur + fade + rise entrance across its direct children using a
+ * pure-CSS keyframe (see `reveal.module.css`) — no animation-library
+ * dependency. Each child is wrapped in a div carrying the animation with an
+ * incremented `animation-delay`.
+ */
+export function AnimatedGroup({
+  as: Tag = "div",
   children,
   className,
-  preset,
-  variants,
+  delay = 0,
+  stagger = 0.05,
   ...divProps
 }: AnimatedGroupProps) {
-  const selectedVariants = {
-    container: addDefaultVariants(defaultContainerVariants),
-    item: addDefaultVariants(preset ? presetVariants[preset] : {}),
-  }
-  const containerVariants = variants?.container ?? selectedVariants.container
-  const itemVariants = variants?.item ?? selectedVariants.item
-
-  const MotionComponent = motion.create(as)
-  const MotionChild = motion.create(asChild)
-
   return (
-    <MotionComponent
-      animate="visible"
-      className={className}
-      initial="hidden"
-      variants={containerVariants}
-      {...divProps}
-    >
+    <Tag className={className} {...divProps}>
       {React.Children.map(children, (child, index) => (
-        <MotionChild key={index} variants={itemVariants}>
+        <div
+          className={styles.item}
+          style={{ "--reveal-delay": `${delay + index * stagger}s` } as CSSProperties}
+        >
           {child}
-        </MotionChild>
+        </div>
       ))}
-    </MotionComponent>
+    </Tag>
   )
 }
 
-export { AnimatedGroup }
+/**
+ * Applies the same reveal animation to a single element without adding a
+ * wrapper div — for callers that only need one animated child.
+ */
+export function AnimatedItem({
+  children,
+  className,
+  delay = 0,
+  ...divProps
+}: ComponentPropsWithRef<"div"> & { delay?: number }) {
+  return (
+    <div
+      className={cn(styles.item, className)}
+      style={{ "--reveal-delay": `${delay}s` } as CSSProperties}
+      {...divProps}
+    >
+      {children}
+    </div>
+  )
+}

package/templates/marketing-site/src/components/motion-primitives/reveal.module.css

@@ -0,0 +1,32 @@
+/*
+ * Shared "reveal" animation for AnimatedGroup and TextEffect — the
+ * blur + fade + rise entrance the hero uses, implemented in pure CSS so the
+ * template carries no animation-library dependency.
+ *
+ * `both` fill-mode keeps elements hidden until their delay elapses, which is
+ * what makes the stagger read as a sequence. Delay per element arrives via
+ * the `--reveal-delay` custom property.
+ */
+@keyframes reveal {
+  from {
+    opacity: 0;
+    filter: blur(12px);
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+.item {
+  animation: reveal 1.1s cubic-bezier(0.25, 1, 0.5, 1) both;
+  animation-delay: var(--reveal-delay, 0s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+}

package/templates/marketing-site/src/components/motion-primitives/text-effect.tsx

@@ -1,292 +1,66 @@
-"use client"
-
-import {
-  AnimatePresence,
-  motion,
-  type TargetAndTransition,
-  type Transition,
-  type Variant,
-  type Variants,
-} from "motion/react"
-import React from "react"
+import React, { type CSSProperties } from "react"
 
 import { cn } from "~/lib/utils"
 
-export type PerType = "char" | "line" | "word"
-export type PresetType = "blur" | "fade" | "fade-in-blur" | "scale" | "slide"
+import styles from "./reveal.module.css"
+
+export type PerType = "line" | "word"
 
 export type TextEffectProps = {
   as?: keyof React.JSX.IntrinsicElements
   children: string
   className?: string
-  containerTransition?: Transition
+  /** Seconds before the first segment starts animating. */
   delay?: number
-  onAnimationComplete?: () => void
-  onAnimationStart?: () => void
+  /** Split granularity for the stagger. Lines split on `\n`. */
   per?: PerType
-  preset?: PresetType
-  segmentTransition?: Transition
-  segmentWrapperClassName?: string
-  speedReveal?: number
-  speedSegment?: number
-  style?: React.CSSProperties
-  trigger?: boolean
-  variants?: {
-    container?: Variants
-    item?: Variants
-  }
+  /** Seconds between each segment's start. */
+  stagger?: number
 }
 
-const defaultStaggerTimes: Record<PerType, number> = {
-  char: 0.03,
-  line: 0.1,
-  word: 0.05,
-}
-
-const defaultContainerVariants: Variants = {
-  hidden: { opacity: 0 },
-  exit: {
-    transition: { staggerChildren: 0.05, staggerDirection: -1 },
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.05,
-    },
-  },
-}
-
-const defaultItemVariants: Variants = {
-  hidden: { opacity: 0 },
-  exit: { opacity: 0 },
-  visible: {
-    opacity: 1,
-  },
-}
-
-const presetVariants: Record<
-  PresetType,
-  { container: Variants; item: Variants }
-> = {
-  slide: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { opacity: 0, y: 20 },
-      exit: { opacity: 0, y: 20 },
-      visible: { opacity: 1, y: 0 },
-    },
-  },
-  blur: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { filter: "blur(12px)", opacity: 0 },
-      exit: { filter: "blur(12px)", opacity: 0 },
-      visible: { filter: "blur(0px)", opacity: 1 },
-    },
-  },
-  fade: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { opacity: 0 },
-      exit: { opacity: 0 },
-      visible: { opacity: 1 },
-    },
-  },
-  "fade-in-blur": {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { filter: "blur(12px)", opacity: 0, y: 20 },
-      exit: { filter: "blur(12px)", opacity: 0, y: 20 },
-      visible: { filter: "blur(0px)", opacity: 1, y: 0 },
-    },
-  },
-  scale: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { opacity: 0, scale: 0 },
-      exit: { opacity: 0, scale: 0 },
-      visible: { opacity: 1, scale: 1 },
-    },
-  },
-}
-
-const AnimationComponent: React.FC<{
-  per: "char" | "line" | "word"
-  segment: string
-  segmentWrapperClassName?: string
-  variants: Variants
-}> = React.memo(({ per, segment, segmentWrapperClassName, variants }) => {
-  const content =
-    per === "line" ? (
-      <motion.span className="block" variants={variants}>
-        {segment}
-      </motion.span>
-    ) : per === "word" ? (
-      <motion.span
-        aria-hidden="true"
-        className="inline-block whitespace-pre"
-        variants={variants}
-      >
-        {segment}
-      </motion.span>
-    ) : (
-      <motion.span className="inline-block whitespace-pre">
-        {segment.split("").map((char, charIndex) => (
-          <motion.span
-            aria-hidden="true"
-            className="inline-block whitespace-pre"
-            key={`char-${charIndex}`}
-            variants={variants}
-          >
-            {char}
-          </motion.span>
-        ))}
-      </motion.span>
-    )
-
-  if (!segmentWrapperClassName) {
-    return content
-  }
-
-  const defaultWrapperClassName = per === "line" ? "block" : "inline-block"
-
-  return (
-    <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
-      {content}
-    </span>
-  )
-})
-
-AnimationComponent.displayName = "AnimationComponent"
-
-const splitText = (text: string, per: "char" | "line" | "word") => {
-  if (per === "line") return text.split("\n")
-  return text.split(/(\s+)/)
-}
-
-const hasTransition = (
-  variant: Variant,
-): variant is TargetAndTransition & { transition?: Transition } => {
-  return (
-    typeof variant === "object" && variant !== null && "transition" in variant
-  )
-}
-
-const createVariantsWithTransition = (
-  baseVariants: Variants,
-  transition?: Transition & { exit?: Transition },
-): Variants => {
-  if (!transition) return baseVariants
-
-  const { ...mainTransition } = transition
-
-  return {
-    ...baseVariants,
-    exit: {
-      ...baseVariants.exit,
-      transition: {
-        ...(hasTransition(baseVariants.exit)
-          ? baseVariants.exit.transition
-          : {}),
-        ...mainTransition,
-        staggerDirection: -1,
-      },
-    },
-    visible: {
-      ...baseVariants.visible,
-      transition: {
-        ...(hasTransition(baseVariants.visible)
-          ? baseVariants.visible.transition
-          : {}),
-        ...mainTransition,
-      },
-    },
-  }
+const defaultStagger: Record<PerType, number> = {
+  line: 0.15,
+  word: 0.04,
 }
 
+/**
+ * Staggered blur + fade + rise text entrance, split per word or per line —
+ * pure CSS (see `reveal.module.css`), no animation-library dependency.
+ * Word segments keep their trailing space inside the animated span so text
+ * still wraps naturally.
+ */
 export function TextEffect({
   as = "p",
   children,
   className,
-  containerTransition,
   delay = 0,
-  onAnimationComplete,
-  onAnimationStart,
   per = "word",
-  preset = "fade",
-  segmentTransition,
-  segmentWrapperClassName,
-  speedReveal = 1,
-  speedSegment = 1,
-  style,
-  trigger = true,
-  variants,
+  stagger,
 }: TextEffectProps) {
-  const segments = splitText(children, per)
-  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div
-
-  const baseVariants = preset
-    ? presetVariants[preset]
-    : { container: defaultContainerVariants, item: defaultItemVariants }
-
-  const stagger = defaultStaggerTimes[per] / speedReveal
-
-  const baseDuration = 0.3 / speedSegment
-
-  const customStagger = hasTransition(variants?.container?.visible ?? {})
-    ? (variants?.container?.visible as TargetAndTransition).transition
-        ?.staggerChildren
-    : undefined
-
-  const customDelay = hasTransition(variants?.container?.visible ?? {})
-    ? (variants?.container?.visible as TargetAndTransition).transition
-        ?.delayChildren
-    : undefined
-
-  const computedVariants = {
-    container: createVariantsWithTransition(
-      variants?.container ?? baseVariants.container,
-      {
-        delayChildren: customDelay ?? delay,
-        staggerChildren: customStagger ?? stagger,
-        ...containerTransition,
-        exit: {
-          staggerChildren: customStagger ?? stagger,
-          staggerDirection: -1,
-        },
-      },
-    ),
-    item: createVariantsWithTransition(variants?.item ?? baseVariants.item, {
-      duration: baseDuration,
-      ...segmentTransition,
-    }),
-  }
+  const Tag = as as React.ElementType
+  const segments =
+    per === "line" ? children.split("\n") : children.split(/(\s+)/).filter(Boolean)
+  const step = stagger ?? defaultStagger[per]
 
+  let animatedIndex = 0
   return (
-    <AnimatePresence mode="popLayout">
-      {trigger && (
-        <MotionTag
-          animate="visible"
-          className={className}
-          exit="exit"
-          initial="hidden"
-          onAnimationComplete={onAnimationComplete}
-          onAnimationStart={onAnimationStart}
-          style={style}
-          variants={computedVariants.container}
-        >
-          {per !== "line" ? <span className="sr-only">{children}</span> : null}
-          {segments.map((segment, index) => (
-            <AnimationComponent
-              key={`${per}-${index}-${segment}`}
-              per={per}
-              segment={segment}
-              segmentWrapperClassName={segmentWrapperClassName}
-              variants={computedVariants.item}
-            />
-          ))}
-        </MotionTag>
-      )}
-    </AnimatePresence>
+    <Tag className={className}>
+      {segments.map((segment, index) => {
+        if (per === "word" && /^\s+$/.test(segment)) {
+          return <React.Fragment key={index}>{segment}</React.Fragment>
+        }
+        const segmentDelay = delay + animatedIndex * step
+        animatedIndex += 1
+        return (
+          <span
+            className={cn(styles.item, per === "line" ? "block" : "inline-block")}
+            key={index}
+            style={{ "--reveal-delay": `${segmentDelay}s` } as CSSProperties}
+          >
+            {segment}
+          </span>
+        )
+      })}
+    </Tag>
   )
 }