rebane2001

<!-- i have to warn you, this code SUCKS! i DO NOT recommend using this code, but you can if you want -->
<div style="width:calc(442px + 28px * 2); outline:1px solid #232323; border-radius:8px;position: absolute;top:0;left:0;translate:calc(50vw - 50%) calc(50vh - 50%); box-sizing: border-box;container-type: size;height:600px;contain:strict">
	<div style="overflow: clip;contain:strict;width:100%;height:100%;position:absolute">
		<div style="padding:28px;display: flex;height:100%;box-sizing:border-box;flex-direction: column;align-items: center;justify-content: center;">
		<svg class="nv-block sm:nv-hidden nv-h-6 nv-w-auto" style="width:100px;margin-top:2px" viewBox="0 0 1230.574 519.774" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare"><path d="m784.025 512.011 5.872-20.311c6.998-24.169 4.394-46.511-7.349-62.926-10.801-15.122-28.804-24.022-50.666-25.056l-414.114-5.281c-2.788-.147-5.096-1.403-6.518-3.471-1.44-2.123-1.773-4.856-.886-7.478 1.366-4.08 5.41-7.164 9.62-7.349l417.954-5.299c49.576-2.271 103.2

malerba118

import {
  MotionValue,
  useAnimationFrame,
  useMotionValue,
} from "framer-motion";
import React from "react";

export interface Clock {
  value: MotionValue<number>;
  setRate: (rate: number) => void;

Eronred

import { motion } from 'framer-motion'
import React from 'react'

const images = [
    {
        src: 'https://a0.muscache.com/im/pictures/miso/Hosting-2810308/original/a653d85a-1a97-45d7-a213-78ef2286122a.jpeg?im_w=720',
        alt: 'Tree'
    },
    {
        src: 'https://a0.muscache.com/im/pictures/2cc58022-2004-4034-a281-22fb622e7461.jpg?im_w=720',

Muzammil-cyber

import React, { useState, useEffect, useRef } from "react";

type AnimatedTextProps = {
  text: string;
  duration?: number;
  className?: string;
};

export default function AnimatedText({
  text,

TomIsLoading

import React, { useEffect, useRef } from "react";
import {
  motion,
  useInView,
  useMotionValueEvent,
  useScroll,
  useTransform,
} from "framer-motion";

export const ScrollAnimations = () => {

bonface221

"use client";
import {
  animate,
  motion,
  useInView,
  useMotionValue,
  useTransform,
} from "framer-motion";
import { useEffect, useRef } from "react";

geroembser

import type { ComponentType } from "react"
import type { MotionValue, Transition } from "framer-motion"
import {
    useViewportScroll,
    useVelocity,
    useTransform,
    useAnimation,
    useMotionValue,
    animate,
} from "framer-motion"

paulweezydesign

import * as React from "react";
import { useRef } from "react";
import { motion, useCycle } from "framer-motion";
import { useDimensions } from "./use-dimensions";
import { MenuToggle } from "./MenuToggle";
import { Navigation } from "./Navigation";

const sidebar = {
  open: (height = 1000) => ({
    clipPath: `circle(${height * 2 + 200}px at 40px 40px)`,

perrysmotors

import type { ComponentType } from "react"
import { useState, useEffect } from "react"

import type { MotionValue, Transition } from "framer-motion"
import {
    useScroll,
    useVelocity,
    useTransform,
    useMotionValue,
    animate,

HansKre

import { ReactNode } from 'react';
import { motion } from 'framer-motion';

type Props = {
  children: ReactNode;
  delay?: number;
};

export default function WithBouncingAnimation({ children, delay }: Props) {
  return (