Home / DavidHDev / react-bits
Repository Analysis

DavidHDev/react-bits

An open source collection of animated, interactive & fully customizable React components for building memorable websites.

1.5 Likely human-written View on GitHub
1.5
Adjusted Score
1.5
Raw Score
100%
Time Factor
2026-05-28
Last Push
40,189
Stars
JavaScript
Language
273,043
Lines of Code
1702
Files
147
Pattern Hits
2026-05-31
Scan Date

Score History

Severity Breakdown

CRITICAL 20HIGH 0MEDIUM 61LOW 66

Pattern Findings

147 matches across 6 categories. Click a row to expand file-level details.

Hallucination Indicators20 hits · 200 pts
SeverityFileLineSnippet
CRITICALpublic/r/CircularGallery-JS-TW.json11 "content": "import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl';\nimport { useEffect, us
CRITICALpublic/r/LightPillar-JS-CSS.json16 "content": "import { useRef, useEffect, useState } from 'react';\nimport * as THREE from 'three';\nimport './LightPil
CRITICALpublic/r/CircularGallery-TS-TW.json11 "content": "import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl';\nimport { useEffect, us
CRITICALpublic/r/LightPillar-TS-CSS.json16 "content": "import React, { useRef, useEffect, useState } from 'react';\nimport * as THREE from 'three';\nimport './L
CRITICALpublic/r/LightPillar-TS-TW.json11 "content": "import React, { useRef, useEffect, useState } from 'react';\nimport * as THREE from 'three';\n\ninterface
CRITICALpublic/r/CircularGallery-JS-CSS.json16 "content": "import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl';\nimport { useEffect, us
CRITICALpublic/r/LightPillar-JS-TW.json11 "content": "import { useRef, useEffect, useState } from 'react';\nimport * as THREE from 'three';\n\nconst LightPilla
CRITICALpublic/r/CircularGallery-TS-CSS.json16 "content": "import { Camera, Mesh, Plane, Program, Renderer, Texture, Transform } from 'ogl';\nimport { useEffect, us
CRITICALpublic/r/GhostCursor-JS-CSS.json16 "content": "import { useEffect, useMemo, useRef } from 'react';\nimport * as THREE from 'three';\nimport { EffectComp
CRITICALpublic/r/GhostCursor-JS-TW.json11 "content": "import { useEffect, useMemo, useRef } from 'react';\nimport * as THREE from 'three';\nimport { EffectComp
CRITICALsrc/ts-default/Backgrounds/LightPillar/LightPillar.tsx297 materialRef.current.uniforms.uResolution.value.set(newWidth, newHeight);
CRITICAL…default/Components/CircularGallery/CircularGallery.tsx643 this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement);
CRITICALsrc/ts-tailwind/Backgrounds/LightPillar/LightPillar.tsx357 materialRef.current.uniforms.uResolution.value.set(newWidth, newHeight);
CRITICAL…ailwind/Components/CircularGallery/CircularGallery.tsx642 this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas as HTMLCanvasElement);
CRITICALsrc/content/Backgrounds/LightPillar/LightPillar.jsx277 materialRef.current.uniforms.uResolution.value.set(newWidth, newHeight);
CRITICAL…content/Components/CircularGallery/CircularGallery.jsx453 this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas);
CRITICALsrc/content/Animations/GhostCursor/GhostCursor.jsx488 materialRef.current.uniforms.iBaseColor.value.set(c.r, c.g, c.b);
CRITICALsrc/tailwind/Backgrounds/LightPillar/LightPillar.jsx281 materialRef.current.uniforms.uResolution.value.set(newWidth, newHeight);
CRITICAL…ailwind/Components/CircularGallery/CircularGallery.jsx451 this.renderer.gl.canvas.parentNode.removeChild(this.renderer.gl.canvas);
CRITICALsrc/tailwind/Animations/GhostCursor/GhostCursor.jsx489 materialRef.current.uniforms.iBaseColor.value.set(c.r, c.g, c.b);
Decorative Section Separators41 hits · 105 pts
SeverityFileLineSnippet
MEDIUMsrc/tools/texture-lab/shaders.js1// ─── WebGL Shader Sources ────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js17// ─── Passthrough Shader ──────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js29// ─── Film Grain / Noise Shader ───────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js143// ─── Chromatic Aberration Shader ─────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js199// ─── Vignette Shader ─────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js230// ─── Scanlines Shader ────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js260// ─── Pixelate Shader ─────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js290// ─── Blur Shader ─────────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js373// ─── Distortion Shader ───────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js440// ─── Posterize Shader ────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js482// ─── Edge Detection Shader ───────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js527// ─── Film Grain Shader ────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js579// ─── Color Grading Shader ────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js648// ─── Ordered Dithering Shader ────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js705// ─── Halftone Shader ─────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js904// ─── ASCII Art Shader ────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1011// ─── Overlay/Texture Shader ──────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1086// ─── Glitch / RGB Split Shader ───────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1169// ─── CRT / Retro Monitor Shader ──────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1257// ─── Duotone / Gradient Map Shader ───────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1289// ─── Kuwahara (Oil Paint) Filter Shader ──────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1358// ─── Barrel / Pincushion Distortion Shader ───────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1403// ─── Ripple / Water Effect Shader ────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1448// ─── Displacement Map Shader ─────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1518// ─── Light Leak / Lens Flare Shader ──────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1601// ─── Bloom Post-Processing Shader ────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1710// ─── Radial/Zoom Blur Shader ─────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1782// ─── Mosaic / Stained Glass Shader ───────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1859// ─── Tilt Shift Shader ───────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1934// ─── Exposure Shader ─────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js1982// ─── Vibrance Shader ─────────────────────────────────────────────────────────
MEDIUMsrc/tools/texture-lab/shaders.js2015// ─── Dot Dither Shader ───────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Header.jsx41// ─── Constants ───────────────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Header.jsx63// ─── Sub-components ──────────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Header.jsx393// ─── Main Component ──────────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Sidebar.jsx18// ─── Constants ───────────────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Sidebar.jsx39// ─── Utility Functions ───────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Sidebar.jsx48// ─── Custom Hooks ────────────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Sidebar.jsx91// ─── Sub-components ──────────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Sidebar.jsx136// ─── Tools Configuration ─────────────────────────────────────────────────────
MEDIUMsrc/components/navs/Sidebar.jsx345// ─── Main Component ──────────────────────────────────────────────────────────
AI Slop Vocabulary20 hits · 50 pts
SeverityFileLineSnippet
MEDIUMpublic/r/GradientText-JS-CSS.json16 "content": "import { useState, useCallback, useEffect, useRef } from 'react';\nimport { motion, useMotionValue, useAn
MEDIUMpublic/r/GradientText-JS-CSS.json16 "content": "import { useState, useCallback, useEffect, useRef } from 'react';\nimport { motion, useMotionValue, useAn
MEDIUMpublic/r/FlowingMenu-JS-CSS.json16 "content": "import { useRef, useEffect, useState } from 'react';\nimport { gsap } from 'gsap';\n\nimport './FlowingMe
MEDIUMpublic/r/FlowingMenu-JS-CSS.json16 "content": "import { useRef, useEffect, useState } from 'react';\nimport { gsap } from 'gsap';\n\nimport './FlowingMe
MEDIUMpublic/r/GradientText-TS-CSS.json16 "content": "import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';\nimport { motion, useMotionV
MEDIUMpublic/r/GradientText-TS-CSS.json16 "content": "import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';\nimport { motion, useMotionV
MEDIUMpublic/r/GradientText-TS-TW.json11 "content": "import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';\nimport { motion, useMotionV
MEDIUMpublic/r/GradientText-TS-TW.json11 "content": "import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';\nimport { motion, useMotionV
MEDIUMpublic/r/GradientText-JS-TW.json11 "content": "import { useState, useCallback, useEffect, useRef } from 'react';\nimport { motion, useMotionValue, useAn
MEDIUMpublic/r/GradientText-JS-TW.json11 "content": "import { useState, useCallback, useEffect, useRef } from 'react';\nimport { motion, useMotionValue, useAn
MEDIUM…s-default/TextAnimations/GradientText/GradientText.tsx58 // Continuously increase position for seamless looping
MEDIUM…s-default/TextAnimations/GradientText/GradientText.tsx89 // Duplicate first color at the end for seamless looping
MEDIUM…-tailwind/TextAnimations/GradientText/GradientText.tsx57 // Continuously increase position for seamless looping
MEDIUM…-tailwind/TextAnimations/GradientText/GradientText.tsx88 // Duplicate first color at the end for seamless looping
MEDIUM…c/content/TextAnimations/GradientText/GradientText.jsx47 // Continuously increase position for seamless looping
MEDIUM…c/content/TextAnimations/GradientText/GradientText.jsx78 // Duplicate first color at the end for seamless looping
MEDIUMsrc/content/Components/FlowingMenu/FlowingMenu.jsx66 // Calculate how many copies we need to fill viewport + extra for seamless loop
MEDIUMsrc/content/Components/FlowingMenu/FlowingMenu.jsx91 // Animate exactly one content width for seamless loop
MEDIUM…/tailwind/TextAnimations/GradientText/GradientText.jsx46 // Continuously increase position for seamless looping
MEDIUM…/tailwind/TextAnimations/GradientText/GradientText.jsx77 // Duplicate first color at the end for seamless looping
Hyper-Verbose Identifiers36 hits · 36 pts
SeverityFileLineSnippet
LOWpublic/r/Hyperspeed-JS-TW.json16 "content": "import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessi
LOWpublic/r/InfiniteMenu-JS-TW.json11 "content": "import { useEffect, useRef, useState } from 'react';\nimport { mat4, quat, vec2, vec3 } from 'gl-matrix';
LOWpublic/r/Beams-JS-CSS.json16 "content": "/* eslint-disable react/no-unknown-property */\nimport { forwardRef, useImperativeHandle, useEffect, useR
LOWpublic/r/InfiniteMenu-TS-TW.json11 "content": "import { FC, useRef, useState, useEffect, MutableRefObject } from 'react';\nimport { mat4, quat, vec2, ve
LOWpublic/r/Beams-TS-CSS.json16 "content": "import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';\n\nim
LOWpublic/r/Hyperspeed-TS-TW.json16 "content": "import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessi
LOWpublic/r/InfiniteMenu-TS-CSS.json16 "content": "import { FC, useRef, useState, useEffect, MutableRefObject } from 'react';\nimport { mat4, quat, vec2, ve
LOWpublic/r/Ballpit-TS-CSS.json11 "content": "import { gsap } from 'gsap';\nimport { Observer } from 'gsap/Observer';\nimport React, { useEffect, useRe
LOWpublic/r/InfiniteMenu-JS-CSS.json16 "content": "import { useEffect, useRef, useState } from 'react';\nimport { mat4, quat, vec2, vec3 } from 'gl-matrix';
LOWpublic/r/Hyperspeed-JS-CSS.json21 "content": "import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessi
LOWpublic/r/SplashCursor-JS-CSS.json11 "content": "'use client';\nimport { useEffect, useRef } from 'react';\n\nfunction SplashCursor({\n SIM_RESOLUTION =
LOWpublic/r/SplashCursor-TS-CSS.json11 "content": "'use client';\nimport React, { useEffect, useRef } from 'react';\n\ninterface ColorRGB {\n r: number;\n
LOWpublic/r/Ballpit-TS-TW.json11 "content": "import { gsap } from 'gsap';\nimport { Observer } from 'gsap/Observer';\nimport React, { useEffect, useRe
LOWpublic/r/Hyperspeed-TS-CSS.json21 "content": "import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessi
LOWpublic/r/SplashCursor-JS-TW.json11 "content": "'use client';\nimport { useEffect, useRef } from 'react';\n\nfunction SplashCursor({\n SIM_RESOLUTION =
LOWpublic/r/Beams-JS-TW.json11 "content": "/* eslint-disable react/no-unknown-property */\nimport { forwardRef, useImperativeHandle, useEffect, useR
LOWpublic/r/Beams-TS-TW.json11 "content": "import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';\n\nim
LOWpublic/r/SplashCursor-TS-TW.json11 "content": "'use client';\nimport React, { useEffect, useRef } from 'react';\n\ninterface ColorRGB {\n r: number;\n
LOWsrc/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx904function resizeRendererToDisplaySize(
LOWsrc/ts-default/Backgrounds/Beams/Beams.tsx264function createStackedPlanesBufferGeometry(
LOWsrc/ts-default/Backgrounds/Ballpit/Ballpit.tsx572function processPointerInteraction() {
LOWsrc/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx436function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
LOWsrc/ts-default/Animations/SplashCursor/SplashCursor.tsx209 function supportRenderTextureFormat(
LOWsrc/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx902function resizeRendererToDisplaySize(
LOWsrc/ts-tailwind/Backgrounds/Beams/Beams.tsx262function createStackedPlanesBufferGeometry(
LOWsrc/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx580function processPointerInteraction() {
LOW…c/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx434function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
LOW…c/ts-tailwind/Animations/SplashCursor/SplashCursor.tsx209 function supportRenderTextureFormat(
LOWsrc/content/Backgrounds/Hyperspeed/Hyperspeed.jsx1146 function resizeRendererToDisplaySize(renderer, setSize) {
LOWsrc/content/Backgrounds/Beams/Beams.jsx225function createStackedPlanesBufferGeometry(n, width, height, spacing, heightSegments) {
LOWsrc/content/Components/InfiniteMenu/InfiniteMenu.jsx402function resizeCanvasToDisplaySize(canvas) {
LOWsrc/content/Animations/SplashCursor/SplashCursor.jsx137 function supportRenderTextureFormat(gl, internalFormat, format, type) {
LOWsrc/tailwind/Backgrounds/Hyperspeed/Hyperspeed.jsx1144 function resizeRendererToDisplaySize(renderer, setSize) {
LOWsrc/tailwind/Backgrounds/Beams/Beams.jsx223function createStackedPlanesBufferGeometry(n, width, height, spacing, heightSegments) {
LOWsrc/tailwind/Components/InfiniteMenu/InfiniteMenu.jsx401function resizeCanvasToDisplaySize(canvas) {
LOWsrc/tailwind/Animations/SplashCursor/SplashCursor.jsx134 function supportRenderTextureFormat(gl, internalFormat, format, type) {
Over-Commented Block28 hits · 28 pts
SeverityFileLineSnippet
LOWsrc/ts-default/Backgrounds/PixelSnow/PixelSnow.tsx41#define PI 3.14159265
LOWsrc/ts-default/Animations/ShapeBlur/ShapeBlur.tsx21uniform float u_borderSize;
LOWsrc/ts-default/Animations/LaserFlow/LaserFlow.tsx61uniform float uFalloffStart;
LOWsrc/ts-default/Animations/LaserFlow/LaserFlow.tsx81#define FLOW_SHARPNESS 1.5
LOWsrc/ts-default/Animations/LaserFlow/LaserFlow.tsx101#define FOG_SPEED_V -0.1
LOW…c/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx61// "10%": { "clip-path": "inset(15% 0 55% 0)" },
LOW…c/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx81// },
LOWsrc/ts-tailwind/Backgrounds/PixelSnow/PixelSnow.tsx41#define PI_OVER_3 1.0471976
LOWsrc/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx21uniform float u_borderSize;
LOWsrc/ts-tailwind/Animations/StarBorder/StarBorder.tsx61// 'star-movement-top': 'star-movement-top linear infinite alternate',
LOWsrc/ts-tailwind/Animations/LaserFlow/LaserFlow.tsx61uniform float uFogFallSpeed;
LOWsrc/ts-tailwind/Animations/LaserFlow/LaserFlow.tsx81
LOWsrc/ts-tailwind/Animations/LaserFlow/LaserFlow.tsx101#define FOG_OCTAVES 5
LOWsrc/content/Backgrounds/PixelSnow/PixelSnow.jsx41#define PI 3.14159265
LOWsrc/content/Animations/ShapeBlur/ShapeBlur.jsx21uniform float u_borderSize;
LOWsrc/content/Animations/LaserFlow/LaserFlow.jsx41uniform float uFade;
LOWsrc/content/Animations/LaserFlow/LaserFlow.jsx61#define W_BASE_X 1.5
LOWsrc/content/Animations/LaserFlow/LaserFlow.jsx81#define FOG_TILT_TO_MOUSE 0.05
LOWsrc/tailwind/TextAnimations/GlitchText/GlitchText.jsx21 return (
LOWsrc/tailwind/TextAnimations/GlitchText/GlitchText.jsx41// "25%": { "clip-path": "inset(40% 0 20% 0)" },
LOWsrc/tailwind/TextAnimations/GlitchText/GlitchText.jsx61// "glitch-before": "glitch var(--before-duration) infinite linear alternate-reverse",
LOWsrc/tailwind/Backgrounds/PixelSnow/PixelSnow.jsx41#define PI_OVER_3 1.0471976
LOWsrc/tailwind/Animations/ShapeBlur/ShapeBlur.jsx21uniform float u_borderSize;
LOWsrc/tailwind/Animations/StarBorder/StarBorder.jsx41
LOWsrc/tailwind/Animations/StarBorder/StarBorder.jsx61// }
LOWsrc/tailwind/Animations/LaserFlow/LaserFlow.jsx41
LOWsrc/tailwind/Animations/LaserFlow/LaserFlow.jsx61#define W_LAYER_GAP 0.25
LOWsrc/tailwind/Animations/LaserFlow/LaserFlow.jsx81#define FOG_TILT_DEADZONE 0.01
Fake / Example Data2 hits · 2 pts
SeverityFileLineSnippet
LOWsrc/constants/code/TextAnimations/scrambledTextCode.js21 Lorem ipsum dolor sit amet consectetur adipisicing elit.
LOWsrc/constants/code/TextAnimations/scrambledTextCode.js21 Lorem ipsum dolor sit amet consectetur adipisicing elit.