Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9da92c9

Browse files
committed
fix PixelBlast types
1 parent5c27dd7 commit9da92c9

File tree

6 files changed

+118
-60
lines changed

6 files changed

+118
-60
lines changed

‎public/llms.txt‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,14 @@ Notes:
5656

5757
## Animations
5858

59-
- [Animated Content](https://www.reactbits.dev/animations/animated-content): Wrapper that animates any children on scroll or mount with configurable direction, distance, duration and easing. CLI: `AnimatedContent`.
59+
- [Animated Content](https://www.reactbits.dev/animations/animated-content): Wrapper that animates any children on scroll or mount with configurable direction, distance, duration, easing and disappear options. CLI: `AnimatedContent`.
60+
- [Antigravity](https://www.reactbits.dev/animations/antigravity): 3D antigravity particle field that repels from the cursor with smooth motion. CLI: `Antigravity`.
6061
- [Blob Cursor](https://www.reactbits.dev/animations/blob-cursor): Organic blob cursor that smoothly follows the pointer with inertia and elastic morphing. CLI: `BlobCursor`.
6162
- [Click Spark](https://www.reactbits.dev/animations/click-spark): Creates particle spark bursts at click position. CLI: `ClickSpark`.
6263
- [Crosshair](https://www.reactbits.dev/animations/crosshair): Custom crosshair cursor with tracking, and link hover effects. CLI: `Crosshair`.
6364
- [Cubes](https://www.reactbits.dev/animations/cubes): 3D rotating cube cluster. Supports auto-rotation or hover interaction. CLI: `Cubes`.
6465
- [Electric Border](https://www.reactbits.dev/animations/electric-border): Jittery electric energy border with animated arcs, glow and adjustable intensity. CLI: `ElectricBorder`.
65-
- [Fade Content](https://www.reactbits.dev/animations/fade-content): Simple directional fade / slide entrance wrapper with threshold-based activation. CLI: `FadeContent`.
66+
- [Fade Content](https://www.reactbits.dev/animations/fade-content): Simple directional fade / slide entrance/ exitwrapper with threshold-based activation. CLI: `FadeContent`.
6667
- [Ghost Cursor](https://www.reactbits.dev/animations/ghost-cursor): Semi-transparent ghost cursor that smoothly follows the real cursor with a trailing effect. CLI: `GhostCursor`.
6768
- [Glare Hover](https://www.reactbits.dev/animations/glare-hover): Adds a realistic moving glare highlight on hover over any element. CLI: `GlareHover`.
6869
- [Gradual Blur](https://www.reactbits.dev/animations/gradual-blur): Progressively un-blurs content based on scroll or trigger creating a cinematic reveal. CLI: `GradualBlur`.
@@ -113,9 +114,10 @@ Notes:
113114
- [Pill Nav](https://www.reactbits.dev/components/pill-nav): Minimal pill nav with sliding active highlight + smooth easing. CLI: `PillNav`.
114115
- [Pixel Card](https://www.reactbits.dev/components/pixel-card): Card content revealed through pixel expansion transition. CLI: `PixelCard`.
115116
- [Profile Card](https://www.reactbits.dev/components/profile-card): Animated profile card glare with 3D hover effect. CLI: `ProfileCard`.
117+
- [Reflective Card](https://www.reactbits.dev/components/reflective-card): Card with dynamic webcam reflection and glare effects that respond to cursor movement. CLI: `ReflectiveCard`.
116118
- [Scroll Stack](https://www.reactbits.dev/components/scroll-stack): Overlapping card stack reveals on scroll with depth layering. CLI: `ScrollStack`.
117119
- [Spotlight Card](https://www.reactbits.dev/components/spotlight-card): Dynamic spotlight follows cursor casting gradient illumination. CLI: `SpotlightCard`.
118-
- [Stack](https://www.reactbits.dev/components/stack): Layered stack with swipe animations and smooth transitions. CLI: `Stack`.
120+
- [Stack](https://www.reactbits.dev/components/stack): Layered stack with swipe animations, autoplay and smooth transitions. CLI: `Stack`.
119121
- [Staggered Menu](https://www.reactbits.dev/components/staggered-menu): Menu with staggered item animations and smooth transitions on open/close. CLI: `StaggeredMenu`.
120122
- [Stepper](https://www.reactbits.dev/components/stepper): Animated multi-step progress indicator with active state transitions. CLI: `Stepper`.
121123
- [Tilted Card](https://www.reactbits.dev/components/tilted-card): 3D perspective tilt card reacting to pointer. CLI: `TiltedCard`.
@@ -141,6 +143,7 @@ Notes:
141143
- [Iridescence](https://www.reactbits.dev/backgrounds/iridescence): Slick iridescent shader with shifting waves. CLI: `Iridescence`.
142144
- [Letter Glitch](https://www.reactbits.dev/backgrounds/letter-glitch): Matrix style letter animation. CLI: `LetterGlitch`.
143145
- [Lightning](https://www.reactbits.dev/backgrounds/lightning): Procedural lightning bolts with branching and glow flicker. CLI: `Lightning`.
146+
- [Light Pillar](https://www.reactbits.dev/backgrounds/light-pillar): Vertical pillar of light with glow effects. CLI: `LightPillar`.
144147
- [Light Rays](https://www.reactbits.dev/backgrounds/light-rays): Volumetric light rays/beams with customizable direction. CLI: `LightRays`.
145148
- [Liquid Chrome](https://www.reactbits.dev/backgrounds/liquid-chrome): Liquid metallic chrome shader with flowing reflective surface. CLI: `LiquidChrome`.
146149
- [Liquid Ether](https://www.reactbits.dev/backgrounds/liquid-ether): Interactive liquid shader with flowing distortion and customizable colors. CLI: `LiquidEther`.

‎public/r/PixelBlast-TS-CSS.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎public/r/PixelBlast-TS-TW.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/components/common/ComponentList.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { Grid as RVGrid, AutoSizer, WindowScroller } from 'react-virtualized';
1717
importgsapfrom'gsap';
1818
import{useGSAP}from'@gsap/react';
1919
import{LinkasRouterLink}from'react-router-dom';
20-
import{FiSearch,FiTrash2,FiX,FiPlay}from'react-icons/fi';
20+
import{FiSearch,FiTrash2,FiX}from'react-icons/fi';
2121
import{RiHeartFill,RiHeartLine}from'react-icons/ri';
2222
import{toast}from'sonner';
2323
import{componentMetadata}from'../../constants/Information';
@@ -28,10 +28,8 @@ import {
2828
removeSavedComponent,
2929
toggleSavedComponent
3030
}from'../../utils/favorites';
31-
import{FaCaretRight,FaChevronRight,FaPlay}from'react-icons/fa';
32-
importDarkVeilfrom'@/ts-tailwind/Backgrounds/DarkVeil/DarkVeil';
31+
import{FaChevronRight,FaPlay}from'react-icons/fa';
3332
importAurorafrom'@/content/Backgrounds/Aurora/Aurora';
34-
import{ArrowRight}from'lucide-react';
3533

3634
constCARD_RADIUS=30;
3735
constCARD_PADDING=6;
@@ -212,7 +210,8 @@ const ComponentList = ({ list, hasDeleteButton = false, hasFavoriteButton = fals
212210
React Bits Pro is coming.
213211
</Text>
214212
<TextfontSize={{base:'12px',md:'16px'}}fontWeight="500"color="#B19EEF"letterSpacing={'-.5px'}>
215-
Watch the latest teaser<IconboxSize={{base:2,md:3}}as={FaChevronRight}display="inline-block"mb={0.25}ml={0.5}/>
213+
Watch the latest teaser{' '}
214+
<IconboxSize={{base:2,md:3}}as={FaChevronRight}display="inline-block"mb={0.25}ml={0.5}/>
216215
</Text>
217216
</Flex>
218217

‎src/ts-default/Backgrounds/PixelBlast/PixelBlast.tsx‎

Lines changed: 53 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,30 @@ import './PixelBlast.css';
55

66
typePixelBlastVariant='square'|'circle'|'triangle'|'diamond';
77

8+
interfaceTouchPoint{
9+
x:number;
10+
y:number;
11+
vx:number;
12+
vy:number;
13+
force:number;
14+
age:number;
15+
}
16+
17+
interfaceTouchTexture{
18+
canvas:HTMLCanvasElement;
19+
texture:THREE.Texture;
20+
addTouch:(norm:{x:number;y:number})=>void;
21+
update:()=>void;
22+
radiusScale:number;
23+
size:number;
24+
}
25+
26+
interfaceReinitConfig{
27+
antialias:boolean;
28+
liquid:boolean;
29+
noiseAmount:number;
30+
}
31+
832
typePixelBlastProps={
933
variant?:PixelBlastVariant;
1034
pixelSize?:number;
@@ -30,7 +54,7 @@ type PixelBlastProps = {
3054
noiseAmount?:number;
3155
};
3256

33-
constcreateTouchTexture=()=>{
57+
constcreateTouchTexture=():TouchTexture=>{
3458
constsize=64;
3559
constcanvas=document.createElement('canvas');
3660
canvas.width=size;
@@ -43,14 +67,7 @@ const createTouchTexture = () => {
4367
texture.minFilter=THREE.LinearFilter;
4468
texture.magFilter=THREE.LinearFilter;
4569
texture.generateMipmaps=false;
46-
consttrail:{
47-
x:number;
48-
y:number;
49-
vx:number;
50-
vy:number;
51-
force:number;
52-
age:number;
53-
}[]=[];
70+
consttrail:TouchPoint[]=[];
5471
letlast:{x:number;y:number}|null=null;
5572
constmaxAge=64;
5673
letradius=0.1*size;
@@ -59,7 +76,7 @@ const createTouchTexture = () => {
5976
ctx.fillStyle='black';
6077
ctx.fillRect(0,0,canvas.width,canvas.height);
6178
};
62-
constdrawPoint=(p:{x:number;y:number;vx:number;vy:number;force:number;age:number})=>{
79+
constdrawPoint=(p:TouchPoint)=>{
6380
constpos={x:p.x*size,y:(1-p.y)*size};
6481
letintensity=1;
6582
consteaseOutSine=(t:number)=>Math.sin((t*Math.PI)/2);
@@ -387,18 +404,18 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
387404
touch?:ReturnType<typeofcreateTouchTexture>;
388405
liquidEffect?:Effect;
389406
}|null>(null);
390-
constprevConfigRef=useRef<any>(null);
407+
constprevConfigRef=useRef<ReinitConfig|null>(null);
391408
useEffect(()=>{
392409
constcontainer=containerRef.current;
393410
if(!container)return;
394411
speedRef.current=speed;
395-
constneedsReinitKeys=['antialias','liquid','noiseAmount'];
396-
constcfg={ antialias, liquid, noiseAmount};
412+
constneedsReinitKeys:(keyofReinitConfig)[]=['antialias','liquid','noiseAmount'];
413+
constcfg:ReinitConfig={ antialias, liquid, noiseAmount};
397414
letmustReinit=false;
398415
if(!threeRef.current)mustReinit=true;
399416
elseif(prevConfigRef.current){
400417
for(constkofneedsReinitKeys)
401-
if(prevConfigRef.current[k]!==(cfgasany)[k]){
418+
if(prevConfigRef.current[k]!==cfg[k]){
402419
mustReinit=true;
403420
break;
404421
}
@@ -475,8 +492,8 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
475492
setSize();
476493
constro=newResizeObserver(setSize);
477494
ro.observe(container);
478-
constrandomFloat=()=>{
479-
if(typeofwindow!=='undefined'&&(windowasany).crypto?.getRandomValues){
495+
constrandomFloat=():number=>{
496+
if(typeofwindow!=='undefined'&&window.crypto?.getRandomValues){
480497
constu32=newUint32Array(1);
481498
window.crypto.getRandomValues(u32);
482499
returnu32[0]/0xffffffff;
@@ -518,7 +535,12 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
518535
);
519536
constnoisePass=newEffectPass(camera,noiseEffect);
520537
noisePass.renderToScreen=true;
521-
if(composer&&composer.passes.length>0)composer.passes.forEach(p=>((pasany).renderToScreen=false));
538+
if(composer&&composer.passes.length>0){
539+
composer.passes.forEach(p=>{
540+
constpass=pas{renderToScreen?:boolean};
541+
pass.renderToScreen=false;
542+
});
543+
}
522544
composer.addPass(noisePass);
523545
}
524546
if(composer)composer.setSize(renderer.domElement.width,renderer.domElement.height);
@@ -560,16 +582,21 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
560582
return;
561583
}
562584
uniforms.uTime.value=timeOffset+clock.getElapsedTime()*speedRef.current;
563-
if(liquidEffect)(liquidEffectasany).uniforms.get('uTime').value=uniforms.uTime.value;
585+
if(liquidEffect){
586+
constliqEffect=liquidEffectasEffect&{uniforms:Map<string,THREE.Uniform>};
587+
consttimeUniform=liqEffect.uniforms.get('uTime');
588+
if(timeUniform)timeUniform.value=uniforms.uTime.value;
589+
}
564590
if(composer){
565591
if(touch)touch.update();
566592
composer.passes.forEach(p=>{
567-
consteffs=(pasany).effects;
568-
if(effs)
569-
effs.forEach((eff:any)=>{
570-
constu=eff.uniforms?.get('uTime');
571-
if(u)u.value=uniforms.uTime.value;
593+
constpass=pas{effects?:Array<Effect&{uniforms:Map<string,THREE.Uniform>}>};
594+
if(pass.effects){
595+
pass.effects.forEach(eff=>{
596+
consttimeUniform=eff.uniforms?.get('uTime');
597+
if(timeUniform)timeUniform.value=uniforms.uTime.value;
572598
});
599+
}
573600
});
574601
composer.render();
575602
}elserenderer.render(scene,camera);
@@ -608,9 +635,10 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
608635
if(transparent)t.renderer.setClearAlpha(0);
609636
elset.renderer.setClearColor(0x000000,1);
610637
if(t.liquidEffect){
611-
constuStrength=(t.liquidEffectasany).uniforms.get('uStrength');
638+
constliqEffect=t.liquidEffectasEffect&{uniforms:Map<string,THREE.Uniform>};
639+
constuStrength=liqEffect.uniforms.get('uStrength');
612640
if(uStrength)uStrength.value=liquidStrength;
613-
constuFreq=(t.liquidEffectasany).uniforms.get('uFreq');
641+
constuFreq=liqEffect.uniforms.get('uFreq');
614642
if(uFreq)uFreq.value=liquidWobbleSpeed;
615643
}
616644
if(t.touch)t.touch.radiusScale=liquidRadius;

‎src/ts-tailwind/Backgrounds/PixelBlast/PixelBlast.tsx‎

Lines changed: 53 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,30 @@ import { EffectComposer, EffectPass, RenderPass, Effect } from 'postprocessing';
44

55
typePixelBlastVariant='square'|'circle'|'triangle'|'diamond';
66

7+
interfaceTouchPoint{
8+
x:number;
9+
y:number;
10+
vx:number;
11+
vy:number;
12+
force:number;
13+
age:number;
14+
}
15+
16+
interfaceTouchTexture{
17+
canvas:HTMLCanvasElement;
18+
texture:THREE.Texture;
19+
addTouch:(norm:{x:number;y:number})=>void;
20+
update:()=>void;
21+
radiusScale:number;
22+
size:number;
23+
}
24+
25+
interfaceReinitConfig{
26+
antialias:boolean;
27+
liquid:boolean;
28+
noiseAmount:number;
29+
}
30+
731
typePixelBlastProps={
832
variant?:PixelBlastVariant;
933
pixelSize?:number;
@@ -29,7 +53,7 @@ type PixelBlastProps = {
2953
noiseAmount?:number;
3054
};
3155

32-
constcreateTouchTexture=()=>{
56+
constcreateTouchTexture=():TouchTexture=>{
3357
constsize=64;
3458
constcanvas=document.createElement('canvas');
3559
canvas.width=size;
@@ -42,14 +66,7 @@ const createTouchTexture = () => {
4266
texture.minFilter=THREE.LinearFilter;
4367
texture.magFilter=THREE.LinearFilter;
4468
texture.generateMipmaps=false;
45-
consttrail:{
46-
x:number;
47-
y:number;
48-
vx:number;
49-
vy:number;
50-
force:number;
51-
age:number;
52-
}[]=[];
69+
consttrail:TouchPoint[]=[];
5370
letlast:{x:number;y:number}|null=null;
5471
constmaxAge=64;
5572
letradius=0.1*size;
@@ -58,7 +75,7 @@ const createTouchTexture = () => {
5875
ctx.fillStyle='black';
5976
ctx.fillRect(0,0,canvas.width,canvas.height);
6077
};
61-
constdrawPoint=(p:{x:number;y:number;vx:number;vy:number;force:number;age:number})=>{
78+
constdrawPoint=(p:TouchPoint)=>{
6279
constpos={x:p.x*size,y:(1-p.y)*size};
6380
letintensity=1;
6481
consteaseOutSine=(t:number)=>Math.sin((t*Math.PI)/2);
@@ -385,18 +402,18 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
385402
touch?:ReturnType<typeofcreateTouchTexture>;
386403
liquidEffect?:Effect;
387404
}|null>(null);
388-
constprevConfigRef=useRef<any>(null);
405+
constprevConfigRef=useRef<ReinitConfig|null>(null);
389406
useEffect(()=>{
390407
constcontainer=containerRef.current;
391408
if(!container)return;
392409
speedRef.current=speed;
393-
constneedsReinitKeys=['antialias','liquid','noiseAmount'];
394-
constcfg={ antialias, liquid, noiseAmount};
410+
constneedsReinitKeys:(keyofReinitConfig)[]=['antialias','liquid','noiseAmount'];
411+
constcfg:ReinitConfig={ antialias, liquid, noiseAmount};
395412
letmustReinit=false;
396413
if(!threeRef.current)mustReinit=true;
397414
elseif(prevConfigRef.current){
398415
for(constkofneedsReinitKeys)
399-
if(prevConfigRef.current[k]!==(cfgasany)[k]){
416+
if(prevConfigRef.current[k]!==cfg[k]){
400417
mustReinit=true;
401418
break;
402419
}
@@ -472,8 +489,8 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
472489
setSize();
473490
constro=newResizeObserver(setSize);
474491
ro.observe(container);
475-
constrandomFloat=()=>{
476-
if(typeofwindow!=='undefined'&&(windowasany).crypto?.getRandomValues){
492+
constrandomFloat=():number=>{
493+
if(typeofwindow!=='undefined'&&window.crypto?.getRandomValues){
477494
constu32=newUint32Array(1);
478495
window.crypto.getRandomValues(u32);
479496
returnu32[0]/0xffffffff;
@@ -515,7 +532,12 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
515532
);
516533
constnoisePass=newEffectPass(camera,noiseEffect);
517534
noisePass.renderToScreen=true;
518-
if(composer&&composer.passes.length>0)composer.passes.forEach(p=>((pasany).renderToScreen=false));
535+
if(composer&&composer.passes.length>0){
536+
composer.passes.forEach(p=>{
537+
constpass=pas{renderToScreen?:boolean};
538+
pass.renderToScreen=false;
539+
});
540+
}
519541
composer.addPass(noisePass);
520542
}
521543
if(composer)composer.setSize(renderer.domElement.width,renderer.domElement.height);
@@ -557,16 +579,21 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
557579
return;
558580
}
559581
uniforms.uTime.value=timeOffset+clock.getElapsedTime()*speedRef.current;
560-
if(liquidEffect)(liquidEffectasany).uniforms.get('uTime').value=uniforms.uTime.value;
582+
if(liquidEffect){
583+
constliqEffect=liquidEffectasEffect&{uniforms:Map<string,THREE.Uniform>};
584+
consttimeUniform=liqEffect.uniforms.get('uTime');
585+
if(timeUniform)timeUniform.value=uniforms.uTime.value;
586+
}
561587
if(composer){
562588
if(touch)touch.update();
563589
composer.passes.forEach(p=>{
564-
consteffs=(pasany).effects;
565-
if(effs)
566-
effs.forEach((eff:any)=>{
567-
constu=eff.uniforms?.get('uTime');
568-
if(u)u.value=uniforms.uTime.value;
590+
constpass=pas{effects?:Array<Effect&{uniforms:Map<string,THREE.Uniform>}>};
591+
if(pass.effects){
592+
pass.effects.forEach(eff=>{
593+
consttimeUniform=eff.uniforms?.get('uTime');
594+
if(timeUniform)timeUniform.value=uniforms.uTime.value;
569595
});
596+
}
570597
});
571598
composer.render();
572599
}elserenderer.render(scene,camera);
@@ -605,9 +632,10 @@ const PixelBlast: React.FC<PixelBlastProps> = ({
605632
if(transparent)t.renderer.setClearAlpha(0);
606633
elset.renderer.setClearColor(0x000000,1);
607634
if(t.liquidEffect){
608-
constuStrength=(t.liquidEffectasany).uniforms.get('uStrength');
635+
constliqEffect=t.liquidEffectasEffect&{uniforms:Map<string,THREE.Uniform>};
636+
constuStrength=liqEffect.uniforms.get('uStrength');
609637
if(uStrength)uStrength.value=liquidStrength;
610-
constuFreq=(t.liquidEffectasany).uniforms.get('uFreq');
638+
constuFreq=liqEffect.uniforms.get('uFreq');
611639
if(uFreq)uFreq.value=liquidWobbleSpeed;
612640
}
613641
if(t.touch)t.touch.radiusScale=liquidRadius;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp