fix(ts): use type-only imports in TS variants (fixes TS1484 in stock Vite react-ts apps)

[noron12234]

Prior art

This is the same fix you already merged twice, applied to everything that is still left:

• fix-types-on-RotatingText-ts #144 fix-types-on-RotatingText-ts (merged) — fixed Variants in RotatingText
• Fix DecryptedText imports to resolve Vite TypeScript build failure #855 (merged) — fixed HTMLMotionProps in DecryptedText, filed as [BUG]: text-animations/decrypted-text, need type keyword #853

Both were one-component patches. tsc says 83 files still have the same defect, so this PR
clears the whole class in one pass instead of waiting for 83 more bug reports.

The problem

The TS variants (TS-CSS / TS-TW) import type-only bindings as value imports:

// src/ts-tailwind/Backgrounds/Silk/Silk.tsx
import { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';
import { IUniform } from 'three';

// src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx
import { motion, AnimatePresence, Transition, type VariantLabels, type Target } from 'motion/react';
//                                 ^^^^^^^^^^ the three neighbours already say `type`

verbatimModuleSyntax is on by default in the scaffold TypeScript itself generates:
npm create vite@latest -- --template react-ts writes it into tsconfig.app.json.
So for anyone installing a TS variant into a stock Vite app, these are hard TS1484 build errors, not warnings.

Reproduction (before)

$ npm create vite@latest demo -- --template react-ts
$ cd demo && npm i && npm i three @react-three/fiber motion && npm i -D @types/three
# drop in the official TS-TW sources for Silk + RotatingText
$ npm run build

src/blocks/RotatingText.tsx(5,3): error TS1484: 'Transition' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
src/blocks/Silk.tsx(3,38): error TS1484: 'RootState' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.
src/blocks/Silk.tsx(5,10): error TS1484: 'IUniform' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

After

$ npm run build
✓ built in 602ms

	before	after
tsc --noEmit --verbatimModuleSyntax in this repo	132 TS1484	0
consumer build (stock react-ts template)	fails	passes
pre-existing unrelated errors (TS2322/TS2745/TS18047)	10	10 (untouched)
vite build here	passes	passes

The change

Adds the inline type modifier at 132 specifiers across 83 files — the same style already used
in these very import statements. Nothing else: the diff is 100% type insertions plus Prettier
rewrapping the 4 lines that crossed the print width.

Affected bindings: ReactNode FC CSSProperties RefObject MutableRefObject HTMLAttributes
ReactElement PropsWithChildren JSX ElementType MouseEventHandler UIEvent PointerEvent
(react) · Transition Variants Easing (motion) · IUniform WebGLRendererParameters (three) ·
RootState ThreeEvent ThreeElements CanvasProps (@react-three/fiber).

On the "all 4 variants" rule

Only the two TS variants are touched, because JS-CSS / JS-TW have no type imports to fix —
the JS sources are byte-identical before and after. Every affected component is updated in both
TS variants, never one alone.

Verification

• npx tsc --noEmit --verbatimModuleSyntax → TS1484 count 132 → 0; the 10 pre-existing errors are unchanged (this PR does not claim to fix those).
• npx vite build passes.
• Rendered the patched Silk + RotatingText in a stock Vite React-TS app: WebGL canvas mounts, text rotates, zero console errors (only an unrelated THREE.Clock deprecation notice from three itself).
• Diff audited mechanically: 94 changed lines, 0 non-type-insertion changes.

Optional follow-up

Setting "verbatimModuleSyntax": true in the root tsconfig.json would catch regressions in-editor.
Left out of this PR on purpose so the diff stays purely mechanical — happy to add it if you want it.

[noron12234]

Follow-up: I understated the impact in the description. For at least one component this is not a tsc complaint at all — it breaks the bundler and the dev server, with TypeScript entirely out of the picture.

Ballpit imports WebGLRendererParameters from three, which is a type. three does not export it at runtime, and unlike the other cases the name survives into the emitted module.

Production build, stock Vite React-TS app, tsc skipped so only the bundler runs:

$ npx vite build
error during build:
Build failed with 1 error:
[MISSING_EXPORT] "WebGLRendererParameters" is not exported by "node_modules/three/build/three.module.js".
 4 │ import { ACESFilmicToneMapping, ..., WebGLRenderer, WebGLRendererParameters } from "three";
   │                                                     ╰───────────── Missing export

Dev server, same app, measured with Playwright:

	page error	component renders
current main	The requested module '/node_modules/.vite/deps/three.js' does not provide an export named 'WebGLRendererParameters'	no — blank page
this PR	none	yes

So Ballpit's two TS variants cannot be built or run at all in a stock Vite app today, regardless of anyone's tsconfig.

Why this one and not Silk: in Silk, IUniform is its own single-specifier import { IUniform } from 'three', and an import statement whose only specifier is unused after type erasure is dropped before it reaches the bundler. Ballpit's sits inside a 21-name import whose other names are genuine values, so the statement survives — and carries the type name with it. That is why the failure looks inconsistent across components rather than universal.

Nothing changes in the diff; the type modifier this PR adds at Ballpit.tsx:25 is what fixes it. Just wanted the severity on the record, since "compile error" undersells a component that currently fails vite build outright.

[Copilot]

Pull request overview

This pull request fixes TypeScript build errors (TS1484) in the TypeScript component variants by converting type-only named imports (from react, motion/react, three, and @react-three/fiber) into explicit type imports using the inline type modifier, aligning with verbatimModuleSyntax defaults in stock Vite React-TS projects.

Changes:

• Updated TS variant files to use type-only import specifiers for bindings that are types (e.g. Transition, Variants, RootState, IUniform, JSX, etc.).
• Applied the same mechanical import fix consistently across both TS variants (ts-default and ts-tailwind), with only formatting rewraps where needed.

Reviewed changes

Copilot reviewed 83 out of 83 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx	Converts React type imports to inline type specifiers.
src/ts-tailwind/TextAnimations/TextType/TextType.tsx	Marks ElementType as type-only in React import.
src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx	Marks JSX as type-only in React import.
src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx	Marks ReactNode/RefObject as type-only in React import.
src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx	Marks ReactNode/RefObject as type-only in React import.
src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx	Marks Transition as type-only in motion/react import.
src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx	Marks ReactNode as type-only in React import.
src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx	Marks FC/CSSProperties as type-only in React import.
src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx	Marks FC/PointerEvent as type-only in React import.
src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx	Marks Transition as type-only in motion/react import.
src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx	Marks Transition/Easing as type-only in motion/react import.
src/ts-tailwind/Components/Stepper/Stepper.tsx	Marks React and Motion type imports as type-only.
src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx	Marks React DOM/types imports as type-only.
src/ts-tailwind/Components/PixelCard/PixelCard.tsx	Marks JSX as type-only in React import.
src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx	Marks FC as type-only in React import.
src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx	Marks FC/MutableRefObject as type-only in React import.
src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx	Marks ReactNode/ThreeElements as type-only imports.
src/ts-tailwind/Components/DecayCard/DecayCard.tsx	Marks ReactNode as type-only in React import.
src/ts-tailwind/Components/Carousel/Carousel.tsx	Marks PanInfo/JSX as type-only imports.
src/ts-tailwind/Components/CardSwap/CardSwap.tsx	Marks ReactElement/ReactNode/RefObject as type-only imports.
src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx	Marks React event/node types as type-only imports.
src/ts-tailwind/Backgrounds/Waves/Waves.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Backgrounds/Silk/Silk.tsx	Marks RootState/IUniform as type-only imports.
src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx	Marks FC as type-only in React import.
src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx	Marks FC/ReactNode as type-only in React import.
src/ts-tailwind/Backgrounds/Dither/Dither.tsx	Marks ThreeEvent as type-only in @react-three/fiber import.
src/ts-tailwind/Backgrounds/Beams/Beams.tsx	Marks FC/ReactNode as type-only in React import.
src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx	Marks WebGLRendererParameters as type-only in three import.
src/ts-tailwind/Animations/Strands/Strands.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx	Marks FC as type-only in React import.
src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx	Marks CanvasProps/ThreeEvent as type-only in @react-three/fiber import.
src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx	Marks ReactNode as type-only in React import.
src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx	Marks CSSProperties as type-only in React import.
src/ts-tailwind/Animations/Magnet/Magnet.tsx	Marks ReactNode/HTMLAttributes as type-only in React import.
src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx	Marks JSX as type-only in React import.
src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx	Marks CSSProperties/PropsWithChildren as type-only in React import.
src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx	Marks CSSProperties/ReactNode as type-only in React import.
src/ts-tailwind/Animations/Crosshair/Crosshair.tsx	Marks RefObject as type-only in React import.
src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx	Converts React type imports to inline type specifiers.
src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx	Marks RefObject as type-only in React import.
src/ts-default/TextAnimations/TextType/TextType.tsx	Marks ElementType as type-only in React import.
src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx	Marks ReactNode/RefObject as type-only in React import.
src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx	Marks ReactNode/RefObject as type-only in React import.
src/ts-default/TextAnimations/RotatingText/RotatingText.tsx	Marks Transition as type-only in motion/react import.
src/ts-default/TextAnimations/GradientText/GradientText.tsx	Marks ReactNode as type-only in React import.
src/ts-default/TextAnimations/GlitchText/GlitchText.tsx	Marks FC/CSSProperties as type-only in React import.
src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx	Marks FC/PointerEvent as type-only in React import.
src/ts-default/TextAnimations/CircularText/CircularText.tsx	Marks Transition as type-only in motion/react import.
src/ts-default/TextAnimations/BlurText/BlurText.tsx	Marks Transition as type-only in motion/react import.
src/ts-default/Components/Stepper/Stepper.tsx	Marks React/Motion type imports as type-only.
src/ts-default/Components/SpecularButton/SpecularButton.tsx	Marks React DOM/types imports as type-only.
src/ts-default/Components/PixelCard/PixelCard.tsx	Marks JSX as type-only in React import.
src/ts-default/Components/OptionWheel/OptionWheel.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Components/ModelViewer/ModelViewer.tsx	Marks FC as type-only in React import.
src/ts-default/Components/LineSidebar/LineSidebar.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx	Marks FC/MutableRefObject as type-only in React import.
src/ts-default/Components/FluidGlass/FluidGlass.tsx	Marks ReactNode/ThreeElements as type-only imports.
src/ts-default/Components/DecayCard/DecayCard.tsx	Marks ReactNode as type-only in React import.
src/ts-default/Components/Carousel/Carousel.tsx	Marks PanInfo as type-only in motion/react import.
src/ts-default/Components/CardSwap/CardSwap.tsx	Marks ReactElement/ReactNode/RefObject as type-only imports.
src/ts-default/Components/AnimatedList/AnimatedList.tsx	Marks React event/node types as type-only imports.
src/ts-default/Backgrounds/Waves/Waves.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Backgrounds/Silk/Silk.tsx	Marks RootState/IUniform as type-only imports.
src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx	Marks FC as type-only in React import.
src/ts-default/Backgrounds/GridMotion/GridMotion.tsx	Marks FC/ReactNode as type-only in React import.
src/ts-default/Backgrounds/Dither/Dither.tsx	Marks ThreeEvent as type-only in @react-three/fiber import.
src/ts-default/Backgrounds/Beams/Beams.tsx	Marks FC/ReactNode as type-only in React import.
src/ts-default/Backgrounds/Ballpit/Ballpit.tsx	Marks WebGLRendererParameters as type-only in three import.
src/ts-default/Animations/Strands/Strands.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Animations/StickerPeel/StickerPeel.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Animations/PixelTransition/PixelTransition.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Animations/PixelTrail/PixelTrail.tsx	Marks CanvasProps/ThreeEvent as type-only in @react-three/fiber import.
src/ts-default/Animations/OrbitImages/OrbitImages.tsx	Marks ReactNode as type-only in React import.
src/ts-default/Animations/MagnetLines/MagnetLines.tsx	Marks CSSProperties as type-only in React import.
src/ts-default/Animations/Magnet/Magnet.tsx	Marks ReactNode/HTMLAttributes as type-only in React import.
src/ts-default/Animations/ImageTrail/ImageTrail.tsx	Marks JSX as type-only in React import.
src/ts-default/Animations/GradualBlur/GradualBlur.tsx	Marks CSSProperties/PropsWithChildren as type-only in React import.
src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx	Marks CSSProperties/ReactNode as type-only in React import.
src/ts-default/Animations/Crosshair/Crosshair.tsx	Marks RefObject as type-only in React import.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[noron12234]

Pushed 6ad9ba0: the registry artifacts were missing from this PR.

public/r/*.json embeds the component source verbatim and is what the jsrepo CLI writes into a user's project, so fixing only src/ left the shipped payload with the value imports intact. That includes Ballpit's WebGLRendererParameters, which is the one that makes rolldown fail the build outright rather than just upsetting tsc.

Regenerated with npm run registry:build; 83 entries change, all TS variants.