tempus

.vscode/settings.json

@@ -22,5 +22,8 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }

app/(pages)/(components)/lenis/index.jsx

@@ -1,16 +1,16 @@
 'use client'
 
-import { useFrame } from '@darkroom.engineering/hamo'
 import 'lenis/dist/lenis.css'
 import { ReactLenis } from 'lenis/react'
 import { useRef } from 'react'
+import { useTempus } from 'tempus/react'
 
 export function Lenis({ root, options }) {
   const lenisRef = useRef()
 
-  useFrame((time) => {
+  useTempus((time) => {
     lenisRef.current.lenis.raf(time)
-  }, 0)
+  })
 
   return (
     <ReactLenis
@@ -19,12 +19,10 @@ export function Lenis({ root, options }) {
       options={{
         ...options,
         autoRaf: false,
-        prevent: (node) => {
-          return (
-            node.nodeName === 'VERCEL-LIVE-FEEDBACK' ||
-            node.id === 'theatrejs-studio-root'
-          )
-        },
+        anchors: true,
+        prevent: (node) =>
+          node.nodeName === 'VERCEL-LIVE-FEEDBACK' ||
+          node.id === 'theatrejs-studio-root',
       }}
     />
   )

app/(pages)/home/page.jsx

@@ -3,7 +3,7 @@ import s from './home.module.css'
 
 export default function Home() {
   return (
-    <Wrapper theme="red" className={s.page}>
+    <Wrapper theme="red" className={s.page} lenis>
       {/* content  */}
     </Wrapper>
   )

app/(pages)/layout.jsx

@@ -1,4 +1,5 @@
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google'
+import { ReactTempus } from 'tempus/react'
 import { Debug } from '~/components/debug'
 import { GSAP } from '~/components/gsap'
 import { RealViewport } from '~/components/real-viewport'
@@ -76,6 +77,7 @@ export default function Layout({ children }) {
         {children}
         <Debug />
         <GSAP />
+        <ReactTempus patch />
       </body>
       {GA_ID && <GoogleAnalytics gaId={GA_ID} />}
     </html>

components/gsap/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import Tempus from '@darkroom.engineering/tempus'
 import gsap from 'gsap'
 import { useLayoutEffect } from 'react'
+import Tempus from 'tempus'
 import { ScrollTriggerConfig } from './scroll-trigger'
 
 export function GSAP({ scrollTrigger = false }) {
@@ -14,7 +14,7 @@ export function GSAP({ scrollTrigger = false }) {
     gsap.ticker.remove(gsap.updateRoot)
     Tempus?.add((time: number) => {
       gsap.updateRoot(time / 1000)
-    }, 0)
+    })
   }, [])
 
   return scrollTrigger && <ScrollTriggerConfig />

components/link/index.tsx

@@ -1,8 +1,6 @@
 'use client'
 
-import { useLenis } from 'lenis/react'
 import NextLink, { type LinkProps as NextLinkProps } from 'next/link'
-import { usePathname } from 'next/navigation'
 import type { ElementType, HTMLAttributes, Ref } from 'react'
 
 interface LinkProps
@@ -25,8 +23,8 @@ export function Link({
   ref,
   ...props
 }: LinkProps) {
-  const lenis = useLenis()
-  const pathname = usePathname()
+  // const lenis = useLenis()
+  // const pathname = usePathname()
 
   if (!href || typeof href !== 'string') {
     const Tag = fallback
@@ -42,16 +40,16 @@ export function Link({
     rel: isExternal ? 'noopener noreferrer' : undefined,
   }
 
-  const isAnchor = href.startsWith('#') || href.startsWith(`${pathname}#`)
+  // const isAnchor = href.startsWith('#') || href.startsWith(`${pathname}#`)
 
   return (
     <NextLink
       ref={ref}
       onClick={(e) => {
-        if (isAnchor && lenis) {
-          e.preventDefault()
-          lenis.scrollTo(href)
-        }
+        // if (isAnchor && lenis) {
+        //   e.preventDefault()
+        //   lenis.scrollTo(href)
+        // }
         onClick?.(e)
       }}
       {...internalLinkProps}

components/marquee/index.tsx

@@ -1,15 +1,15 @@
-'use client'
+"use client"
 
 import {
-  useFrame,
   useIntersectionObserver,
   useResizeObserver,
-} from '@darkroom.engineering/hamo'
-import cn from 'clsx'
-import { useLenis } from 'lenis/react'
-import { type HTMLAttributes, useRef } from 'react'
-import { modulo } from '~/libs/maths'
-import s from './marquee.module.css'
+} from "@darkroom.engineering/hamo"
+import cn from "clsx"
+import { useLenis } from "lenis/react"
+import { type HTMLAttributes, useRef } from "react"
+import { useTempus } from "tempus/react"
+import { modulo } from "~/libs/maths"
+import s from "./marquee.module.css"
 
 interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
   repeat?: number
@@ -40,7 +40,7 @@ export function Marquee({
 
   const lenis = useLenis() // eslint-disable-line react-hooks/exhaustive-deps
 
-  useFrame((_, deltaTime) => {
+  useTempus((_, deltaTime) => {
     if (!intersection.isIntersecting) return
     if (pauseOnHover && isHovered.current) return
 
@@ -89,7 +89,7 @@ export function Marquee({
           }`}
           className={s.inner}
           aria-hidden={i !== 0}
-          data-nosnippet={i !== 0 ? '' : undefined}
+          data-nosnippet={i !== 0 ? "" : undefined}
           ref={(node) => {
             if (!node) return
             elementsRef.current[i] = node

docs/gsap/README.md

@@ -4,7 +4,7 @@ Satūs uses GSAP for animations
 
 ## Usage
 
-To setup GSAP in your project, you can import it like with the `<GSAP>` component, it will merge automatically merge GSAP ticker with [Tempus](https://www.npmjs.com/package/@darkroom.engineering/tempus). If `scrollTrigger` is passed as a prop, it will also setup ScrollTrigger so it's synced with [Lenis](https://www.npmjs.com/package/@darkroom.engineering/lenis).
+To setup GSAP in your project, you can import it like with the `<GSAP>` component, it will merge automatically merge GSAP ticker with [Tempus](https://www.npmjs.com/package/tempus). If `scrollTrigger` is passed as a prop, it will also setup ScrollTrigger so it's synced with [Lenis](https://www.npmjs.com/package/lenis).
 
 ```jsx
 <GSAP scrollTrigger />

libs/orchestra/minimap/index.tsx

@@ -1,9 +1,10 @@
-'use client'
+"use client"
 
-import { useFrame, useWindowSize } from '@darkroom.engineering/hamo'
-import { useCallback, useEffect, useId, useRef, useState } from 'react'
-import { create } from 'zustand'
-import s from './minimap.module.css'
+import { useWindowSize } from "@darkroom.engineering/hamo"
+import { useCallback, useEffect, useId, useRef, useState } from "react"
+import { useTempus } from "tempus/react"
+import { create } from "zustand"
+import s from "./minimap.module.css"
 
 type MinimapEntry = {
   element: HTMLElement
@@ -18,7 +19,7 @@ const useMinimapStore = create<MinimapStore>(() => ({
   list: {},
 }))
 
-export function useMinimap({ color = 'blue' } = {}) {
+export function useMinimap({ color = "blue" } = {}) {
   const [element, setElement] = useState<HTMLElement | null>()
   const id = useId()
 
@@ -47,7 +48,7 @@ export function useMinimap({ color = 'blue' } = {}) {
 }
 
 export function Minimap() {
-  const [aspectRatio, setAspectRatio] = useState('1')
+  const [aspectRatio, setAspectRatio] = useState("1")
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(([entry]) => {
@@ -70,14 +71,14 @@ export function Minimap() {
       window.scrollY /
       (document.documentElement.scrollHeight - window.innerHeight)
 
-    elementRef.current.style.setProperty('--progress', progress.toString())
+    elementRef.current.style.setProperty("--progress", progress.toString())
   }, [])
 
   useEffect(() => {
-    window.addEventListener('scroll', onScroll)
+    window.addEventListener("scroll", onScroll)
 
     return () => {
-      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener("scroll", onScroll)
     }
   }, [onScroll])
 
@@ -89,8 +90,8 @@ export function Minimap() {
     <div
       ref={elementRef}
       style={{
-        '--viewport-ratio': width / height,
-        '--body-ratio': aspectRatio,
+        "--viewport-ratio": width / height,
+        "--body-ratio": aspectRatio,
       }}
       className={s.minimap}
     >
@@ -107,7 +108,7 @@ export function Minimap() {
 function Marker({ element, color }: MinimapEntry) {
   const markerRef = useRef<HTMLDivElement>(null!)
 
-  useFrame(() => {
+  useTempus(() => {
     if (!element) return
 
     if (!markerRef.current) return
@@ -120,7 +121,7 @@ function Marker({ element, color }: MinimapEntry) {
     const width = rect.width / window.innerWidth
 
     // markerRef.current.style.top = `${top * 100}%`
-    markerRef.current.style.setProperty('--top', top.toString())
+    markerRef.current.style.setProperty("--top", top.toString())
     // markerRef.current.style.height = `${height * 100}%`
     markerRef.current.style.left = `${left * 100}%`
     markerRef.current.style.width = `${width * 100}%`

libs/orchestra/stats/index.ts

@@ -1,6 +1,6 @@
-import { useFrame } from '@darkroom.engineering/hamo'
 import { useEffect, useMemo } from 'react'
 import _Stats from 'stats-gl'
+import { useTempus } from 'tempus/react'
 import s from './stats.module.css'
 
 export function Stats() {
@@ -15,14 +15,22 @@ export function Stats() {
     }
   }, [stats])
 
-  useFrame(() => {
-    stats.begin()
-  }, Number.NEGATIVE_INFINITY)
-
-  useFrame(() => {
-    stats.end()
-    stats.update()
-  }, Number.POSITIVE_INFINITY)
+  useTempus(
+    () => {
+      stats.begin()
+    },
+    {
+      priority: Number.NEGATIVE_INFINITY,
+    }
+  )
 
-  return null
+  useTempus(
+    () => {
+      stats.end()
+      stats.update()
+    },
+    {
+      priority: Number.POSITIVE_INFINITY,
+    }
+  )
 }

libs/webgl/components/raf/index.ts

@@ -1,14 +1,19 @@
-import { useFrame } from '@darkroom.engineering/hamo'
 import { useThree } from '@react-three/fiber'
+import { useTempus } from 'tempus/react'
 
 export function RAF({ render = true }) {
   const advance = useThree((state) => state.advance)
 
-  useFrame((time: number) => {
-    if (render) {
-      advance(time / 1000)
+  useTempus(
+    (time: number) => {
+      if (render) {
+        advance(time / 1000)
+      }
+    },
+    {
+      priority: 1,
     }
-  }, 1)
+  )
 
   return null
 }

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

package.json

@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@darkroom.engineering/hamo": "0.6.46",
-    "@darkroom.engineering/tempus": "0.0.46",
     "@hubspot/api-client": "^12.0.1",
     "@next/third-parties": "^15.0.3",
     "@react-three/drei": "^9.115.0",
@@ -28,7 +27,7 @@
     "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
     "clsx": "^2.1.1",
     "gsap": "^3.12.5",
-    "lenis": "1.1.16",
+    "lenis": "1.1.19-dev.3",
     "next": "15.0.4",
     "postprocessing": "^6.36.4",
     "react": "19.0.0",
@@ -39,6 +38,7 @@
     "stats-gl": "^3.6.0",
     "storyblok-js-client": "^6.10.1",
     "storyblok-rich-text-react-renderer": "^2.9.2",
+    "tempus": "1.0.0-dev.5",
     "three": "^0.170.0",
     "tunnel-rat": "^0.1.2",
     "zustand": "5.0.1"