The prompt that made it
as publishedYOU ARE GIVEN A TASK TO INTEGRATE AN EXISTING REACT COMPONENT IN THE CODEBASE
THE CODEBASE SHOULD SUPPORT:
- SHADCN PROJECT STRUCTURE
- TAILWIND CSS
- TYPESCRIPT
IF IT DOESN'T, PROVIDE INSTRUCTIONS ON HOW TO SETUP PROJECT VIA SHADCN CLI, INSTALL TAILWIND OR TYPESCRIPT.
DETERMINE THE DEFAULT PATH FOR COMPONENTS AND STYLES.
IF DEFAULT PATH FOR COMPONENTS IS NOT /COMPONENTS/UI, PROVIDE INSTRUCTIONS ON WHY IT'S IMPORTANT TO CREATE THIS FOLDER
COPY-PASTE THIS COMPONENT TO /COMPONENTS/UI FOLDER:
```tsx
ASD.TSX
"USE CLIENT";
IMPORT REACT, { USEEFFECT, USEREF } FROM "REACT";
/* ========= FRAGMENT SHADER (FIXED: INIT Z/D/F; SAFE DIVIDES) ========= */
CONST SHADER_SRC = `#VERSION 300 ES
PRECISION HIGHP FLOAT;
OUT VEC4 FRAGCOLOR;
IN VEC2 V_UV;
UNIFORM VEC3 IRESOLUTION; // (W, H, DPR)
UNIFORM FLOAT ITIME;
UNIFORM INT IFRAME;
UNIFORM VEC4 IMOUSE;
CONST FLOAT GRID_SCALE = 18.0;
CONST FLOAT MAJOR_STEP = 4.0;
CONST FLOAT THIN_WIDTH = 0.010;
CONST FLOAT MAJOR_WIDTH = 0.018;
CONST FLOAT SCROLL_SPEED = 0.02;
CONST FLOAT VIGNETTE_AMT = 0.28;
CONST FLOAT MESH_AMT = 0.85;
CONST FLOAT NOISE_AMT = 0.030;
CONST FLOAT DITHER_DARK = 0.010;
CONST FLOAT DITHER_LIGHT = 0.004;
CONST FLOAT ASCII_AMT = 0.23;
CONST FLOAT ASCII_SCALE = 26.0;
CONST FLOAT ASCII_EVERY = 2.0;
MAT2 ROT(FLOAT A){ FLOAT C=COS(A), S=SIN(A); RETURN MAT2(C,-S,S,C); }
// ORDERED DITHER 4×4
FLOAT BAYER4(VEC2 P){
IVEC2 IP = IVEC2(INT(MOD(P.X,4.0)), INT(MOD(P.Y,4.0)));
INT IDX = IP.Y*4 + IP.X;
INT M[16]; M[0]=0;M[1]=8;M[2]=2;M[3]=10;M[4]=12;M[5]=4;M[6]=14;M[7]=6;
M[8]=3;M[9]=11;M[10]=1;M[11]=9;M[12]=15;M[13]=7;M[14]=13;M[15]=5;
RETURN FLOAT(M[IDX]) / 15.0;
}
// HASH + VALUE NOISE
FLOAT HASH21(VEC2 P){ P=FRACT(P*VEC2(123.34,456.21)); P+=DOT(P,P+45.32); RETURN FRACT(P.X*P.Y); }
FLOAT VNOISE(VEC2 P){
VEC2 I=FLOOR(P), F=FRACT(P);
FLOAT A=HASH21(I), B=HASH21(I+VEC2(1,0)), C=HASH21(I+VEC2(0,1)), D=HASH21(I+VEC2(1,1));
VEC2 U=F*F*(3.0-2.0*F);
RETURN MIX(MIX(A,B,U.X), MIX(C,D,U.X), U.Y);
}
FLOAT GRIDLINEAA(VEC2 UV, FLOAT SCALE, FLOAT WIDTH){
VEC2 G = ABS(FRACT(UV*SCALE) - 0.5);
FLOAT D = MIN(G.X, G.Y);
FLOAT AA = FWIDTH(D);
RETURN 1.0 - SMOOTHSTEP(WIDTH, WIDTH + AA, D);
}
FLOAT MAJORGRIDAA(VEC2 UV, FLOAT SCALE, FLOAT STEPN, FLOAT WIDTH){
FLOAT SMAJOR = MAX(1.0, SCALE/STEPN);
RETURN GRIDLINEAA(UV, SMAJOR, WIDTH);
}
// MESH-GRADIENT: 4 ТЁМНО-СИНИЕ/ГЛУБОКИЕ ТОЧКИ
VEC3 MESHGRADIENT(VEC2 UV){
VEC2 P0=VEC2(-0.70,-0.45), P1=VEC2(0.75,-0.35), P2=VEC2(-0.65,0.65), P3=VEC2(0.80,0.55);
VEC3 C0=VEC3(0.05,0.10,0.26); // DEEP NAVY
VEC3 C1=VEC3(0.08,0.16,0.36); // ROYAL NAVY
VEC3 C2=VEC3(0.03,0.09,0.22); // ABYSS
VEC3 C3=VEC3(0.10,0.20,0.40); // COBALT
FLOAT E=2.0;
FLOAT W0=POW(1.0/(0.2+DISTANCE(UV,P0)),E);
FLOAT W1=POW(1.0/(0.2+DISTANCE(UV,P1)),E);
FLOAT W2=POW(1.0/(0.2+DISTANCE(UV,P2)),E);
FLOAT W3=POW(1.0/(0.2+DISTANCE(UV,P3)),E);
FLOAT WS=W0+W1+W2+W3;
RETURN (C0*W0+C1*W1+C2*W2+C3*W3)/WS;
}
FLOAT SDLINEX(VEC2 P, FLOAT W){ RETURN 1.0 - SMOOTHSTEP(W, W+FWIDTH(P.Y), ABS(P.Y)); }
FLOAT SDLINEY(VEC2 P, FLOAT W){ RETURN 1.0 - SMOOTHSTEP(W, W+FWIDTH(P.X), ABS(P.X)); }
FLOAT SDDIAG1(VEC2 P, FLOAT W){ FLOAT D=ABS(P.X+P.Y)/SQRT(2.0); RETURN 1.0 - SMOOTHSTEP(W, W+FWIDTH(D), D); }
FLOAT SDDIAG2(VEC2 P, FLOAT W){ FLOAT D=ABS(P.X-P.Y)/SQRT(2.0); RETURN 1.0 - SMOOTHSTEP(W, W+FWIDTH(D), D); }
FLOAT SDDOT (VEC2 P, FLOAT R){ FLOAT D=LENGTH(P); RETURN 1.0 - SMOOTHSTEP(R, R+FWIDTH(D), D); }
FLOAT ASCIIGLYPH(VEC2 CELLUV, FLOAT LEVEL){
VEC2 P=CELLUV; FLOAT W=0.11, R=0.10;
FLOAT G0=SDDOT(P,R), G1=SDLINEX(P,W), G2=SDLINEY(P,W),
G3=MAX(SDLINEX(P,W),SDLINEY(P,W)),
G4=SDDIAG1(P,W), G5=SDDIAG2(P,W),
G6=MAX(SDDIAG1(P,W),SDDIAG2(P,W)),
G7=MAX(SDLINEX(P,W), MAX(SDLINEY(P,W), G6));
FLOAT M=0.;
M=MIX(M,G0, SMOOTHSTEP(0.00,0.12,LEVEL)*(1.0-STEP(LEVEL,0.12)));
M=MIX(M,G1, SMOOTHSTEP(0.12,0.28,LEVEL)*(1.0-STEP(LEVEL,0.28)));
M=MIX(M,G2, SMOOTHSTEP(0.28,0.44,LEVEL)*(1.0-STEP(LEVEL,0.44)));
M=MIX(M,G3, SMOOTHSTEP(0.44,0.60,LEVEL)*(1.0-STEP(LEVEL,0.60)));
M=MIX(M,G4, SMOOTHSTEP(0.60,0.72,LEVEL)*(1.0-STEP(LEVEL,0.72)));
M=MIX(M,G5, SMOOTHSTEP(0.72,0.84,LEVEL)*(1.0-STEP(LEVEL,0.84)));
M=MIX(M,G6, SMOOTHSTEP(0.84,0.94,LEVEL)*(1.0-STEP(LEVEL,0.94)));
M=MIX(M,G7, SMOOTHSTEP(0.94,1.00,LEVEL));
RETURN CLAMP(M,0.0,1.0);
}
VOID MAINIMAGE(OUT VEC4 FRAGCOLOR, IN VEC2 FRAGCOORD)
{
VEC2 R = IRESOLUTION.XY;
FLOAT T = ITIME;
VEC2 UV = (FRAGCOORD - 0.5*R) / MAX(R.Y, 1.0);
VEC3 BASEDEEP = VEC3(0.03,0.06,0.12);
VEC3 BASETINT = VEC3(0.05,0.09,0.18);
FLOAT VGRAD = SMOOTHSTEP(-0.92, 0.55, -UV.Y);
VEC3 BG = MIX(BASEDEEP, BASETINT, VGRAD);
BG = MIX(BG, MESHGRADIENT(UV), MESH_AMT);
FLOAT RAD = LENGTH(UV);
FLOAT VIG = POW(1.0 - VIGNETTE_AMT * RAD, 1.0);
BG *= CLAMP(VIG, 0.0, 1.0);
VEC2 SCROLLDIR = NORMALIZE(VEC2(1.0, -0.55));
VEC2 UVANIM = UV + SCROLL_SPEED * T * SCROLLDIR;
FLOAT THIN = GRIDLINEAA (UVANIM, GRID_SCALE, THIN_WIDTH);
FLOAT MAJOR = MAJORGRIDAA(UVANIM, GRID_SCALE, MAJOR_STEP, MAJOR_WIDTH);
VEC3 LINETHIN = VEC3(0.58,0.66,0.95);
VEC3 LINEMAJOR = VEC3(0.78,0.84,1.00);
VEC3 COL = BG
+ LINETHIN * THIN * 0.25
+ LINEMAJOR * MAJOR * 0.52;
VEC2 UMAJOR = UVANIM * (GRID_SCALE / MAJOR_STEP);
VEC2 IDX = FLOOR(UMAJOR + 0.5);
FLOAT SELX = 1.0 - STEP(0.001, ABS(FRACT(IDX.X / ASCII_EVERY)));
FLOAT SELY = 1.0 - STEP(0.001, ABS(FRACT(IDX.Y / ASCII_EVERY)));
FLOAT ASCIILINESEL = MAX(SELX, SELY);
IF (ASCII_AMT > 0.001) {
VEC2 AUV = UV * ASCII_SCALE;
VEC2 CELLF = FRACT(AUV) - 0.5;
FLOAT LVL = CLAMP(DOT(COL, VEC3(0.2126,0.7152,0.0722)), 0.0, 1.0);
FLOAT GLYPH = ASCIIGLYPH(CELLF, LVL);
FLOAT NEARMAJOR = MAJOR;
FLOAT ASCIIMASK = ASCIILINESEL * NEARMAJOR;
VEC3 ASCIICOLOR = MIX(VEC3(0.50,0.70,1.0), MESHGRADIENT(UV), 0.25);
COL = MIX(COL, COL + ASCIICOLOR * GLYPH * 0.30, ASCII_AMT * ASCIIMASK);
}
FLOAT N = VNOISE(FRAGCOORD*0.6 + VEC2(T*12.0, -T*9.0));
COL += (N - 0.5) * NOISE_AMT;
// ---- ORDERED DITHER (BAYER 4×4) ----
FLOAT LUMA = DOT(COL, VEC3(0.2126,0.7152,0.0722));
FLOAT DAMT = MIX(DITHER_DARK, DITHER_LIGHT, LUMA);
COL += (BAYER4(FRAGCOORD) - 0.5) * DAMT;
COL = TANH(COL);
FRAGCOLOR = VEC4(COL, 1.0);
}
VOID MAIN(){ MAINIMAGE(FRAGCOLOR, GL_FRAGCOORD.XY); }
`;
/* ========= VERTEX SHADER: FULLSCREEN TRIANGLE ========= */
CONST VERT_SRC = `#VERSION 300 ES
PRECISION HIGHP FLOAT;
LAYOUT(LOCATION=0) IN VEC2 A_POS;
OUT VEC2 V_UV;
VOID MAIN(){
V_UV = A_POS * 0.5 + 0.5;
GL_POSITION = VEC4(A_POS, 0.0, 1.0);
}
`;
/* ========= UTILS (NO-THROW, LOGS ONLY) ========= */
FUNCTION SAFECOMPILE(GL: WEBGL2RENDERINGCONTEXT, TYPE: NUMBER, SRC: STRING) {
CONST SH = GL.CREATESHADER(TYPE)!;
GL.SHADERSOURCE(SH, SRC);
GL.COMPILESHADER(SH);
CONST OK = GL.GETSHADERPARAMETER(SH, GL.COMPILE_STATUS);
CONST LOG = GL.GETSHADERINFOLOG(SH) || "";
RETURN { SHADER: OK ? SH : NULL, LOG };
}
FUNCTION SAFELINK(GL: WEBGL2RENDERINGCONTEXT, VS: WEBGLSHADER, FS: WEBGLSHADER) {
CONST PROG = GL.CREATEPROGRAM()!;
GL.ATTACHSHADER(PROG, VS);
GL.ATTACHSHADER(PROG, FS);
GL.LINKPROGRAM(PROG);
CONST OK = GL.GETPROGRAMPARAMETER(PROG, GL.LINK_STATUS);
CONST LOG = GL.GETPROGRAMINFOLOG(PROG) || "";
RETURN { PROGRAM: OK ? PROG : NULL, LOG };
}
FUNCTION DRAWERROR(GL: WEBGL2RENDERINGCONTEXT, MSG: STRING) {
CONSOLE.ERROR(MSG);
GL.BINDFRAMEBUFFER(GL.FRAMEBUFFER, NULL);
GL.CLEARCOLOR(0.2, 0.0, 0.0, 1);
GL.CLEAR(GL.COLOR_BUFFER_BIT);
}
/* ========= CANVAS RUNTIME (TDZ-SAFE, ROBUST RESIZE) ========= */
FUNCTION SHADERCANVAS({
FRAGSOURCE,
PIXELRATIO,
}: {
FRAGSOURCE: STRING;
PIXELRATIO?: NUMBER;
}) {
CONST CANVASREF = USEREF<HTMLCANVASELEMENT | NULL>(NULL);
CONST RAFREF = USEREF<NUMBER | NULL>(NULL);
CONST STARTREF = USEREF<NUMBER>(0);
CONST FRAMEREF = USEREF<NUMBER>(0);
CONST MOUSEREF = USEREF({ X: 0, Y: 0, L: 0, R: 0 });
USEEFFECT(() => {
CONST CANVAS = CANVASREF.CURRENT!;
CONST GL = CANVAS.GETCONTEXT("WEBGL2", { PREMULTIPLIEDALPHA: FALSE });
IF (!GL) RETURN;
// PREDECLARE RESOURCES TO AVOID TDZ IN CLEANUP
LET DISPOSED = FALSE;
LET VAO: WEBGLVERTEXARRAYOBJECT | NULL = NULL;
LET VBO: WEBGLBUFFER | NULL = NULL;
LET PROGRAM: WEBGLPROGRAM | NULL = NULL;
LET RO: RESIZEOBSERVER | NULL = NULL;
LET RESIZESCHEDULED = FALSE;
CONST ONMOVE = (E: MOUSEEVENT) => {
CONST RECT = CANVAS.GETBOUNDINGCLIENTRECT();
CONST X = E.CLIENTX - RECT.LEFT;
CONST Y = E.CLIENTY - RECT.TOP;
MOUSEREF.CURRENT.X = MATH.MAX(0, MATH.MIN(X, RECT.WIDTH));
MOUSEREF.CURRENT.Y = MATH.MAX(0, MATH.MIN(RECT.HEIGHT - Y, RECT.HEIGHT));
};
CONST ONDOWN = (E: MOUSEEVENT) => { IF (E.BUTTON === 0) MOUSEREF.CURRENT.L = 1; IF (E.BUTTON === 2) MOUSEREF.CURRENT.R = 1; };
CONST ONUP = (E: MOUSEEVENT) => { IF (E.BUTTON === 0) MOUSEREF.CURRENT.L = 0; IF (E.BUTTON === 2) MOUSEREF.CURRENT.R = 0; };
CONST ONCTXMENU = (E: EVENT) => E.PREVENTDEFAULT();
CONST ONCONTEXTLOST = (EV: EVENT) => { EV.PREVENTDEFAULT(); IF (RAFREF.CURRENT) CANCELANIMATIONFRAME(RAFREF.CURRENT); RAFREF.CURRENT = NULL; };
CONST ONCONTEXTRESTORED = () => { SCHEDULESIZE(); STARTREF.CURRENT = PERFORMANCE.NOW(); FRAMEREF.CURRENT = 0; IF (!RAFREF.CURRENT) RAFREF.CURRENT = REQUESTANIMATIONFRAME(TICK); };
CONST GETDPR = () => {
CONST SYS = (WINDOW.DEVICEPIXELRATIO || 1);
RETURN MATH.MAX(1, MATH.MIN(2, PIXELRATIO ?? SYS)); // PARENS FOR ?? WITH ||
};
FUNCTION APPLYSIZE() {
RESIZESCHEDULED = FALSE;
IF (DISPOSED) RETURN;
CONST DPR = GETDPR();
CONST CSSW = MATH.MAX(1, (CANVAS.CLIENTWIDTH | 0));
CONST CSSH = MATH.MAX(1, (CANVAS.CLIENTHEIGHT | 0));
CONST W = MATH.MAX(1, MATH.FLOOR(CSSW * DPR));
CONST H = MATH.MAX(1, MATH.FLOOR(CSSH * DPR));
IF (CANVAS.WIDTH !== W || CANVAS.HEIGHT !== H) {
CANVAS.WIDTH = W; CANVAS.HEIGHT = H;
GL.VIEWPORT(0, 0, W, H);
}
}
FUNCTION SCHEDULESIZE() {
IF (RESIZESCHEDULED) RETURN;
RESIZESCHEDULED = TRUE;
REQUESTANIMATIONFRAME(APPLYSIZE);
}
// GEOMETRY
VAO = GL.CREATEVERTEXARRAY();
VBO = GL.CREATEBUFFER();
IF (!VAO || !VBO) { DRAWERROR(GL, "FAILED TO CREATE VAO/VBO"); RETURN CLEANUP; }
GL.BINDVERTEXARRAY(VAO);
GL.BINDBUFFER(GL.ARRAY_BUFFER, VBO);
GL.BUFFERDATA(GL.ARRAY_BUFFER, NEW FLOAT32ARRAY([-1, -1, 3, -1, -1, 3]), GL.STATIC_DRAW);
GL.ENABLEVERTEXATTRIBARRAY(0);
GL.VERTEXATTRIBPOINTER(0, 2, GL.FLOAT, FALSE, 0, 0);
// SHADERS
CONST { SHADER: VS, LOG: VSLOG } = SAFECOMPILE(GL, GL.VERTEX_SHADER, VERT_SRC);
IF (!VS) { DRAWERROR(GL, `VERTEX COMPILE ERROR:\n${VSLOG}`); RETURN CLEANUP; }
CONST { SHADER: FS, LOG: FSLOG } = SAFECOMPILE(GL, GL.FRAGMENT_SHADER, FRAGSOURCE);
IF (!FS) { DRAWERROR(GL, `FRAGMENT COMPILE ERROR:\n${FSLOG}`); GL.DELETESHADER(VS); RETURN CLEANUP; }
CONST LINKED = SAFELINK(GL, VS, FS);
GL.DELETESHADER(VS); GL.DELETESHADER(FS);
IF (!LINKED.PROGRAM) { DRAWERROR(GL, `PROGRAM LINK ERROR:\n${LINKED.LOG}`); RETURN CLEANUP; }
PROGRAM = LINKED.PROGRAM;
// UNIFORMS
CONST URESOLUTION = GL.GETUNIFORMLOCATION(PROGRAM, "IRESOLUTION");
CONST UTIME = GL.GETUNIFORMLOCATION(PROGRAM, "ITIME");
CONST UFRAME = GL.GETUNIFORMLOCATION(PROGRAM, "IFRAME");
CONST UMOUSE = GL.GETUNIFORMLOCATION(PROGRAM, "IMOUSE");
// RESIZE OBSERVER
RO = NEW RESIZEOBSERVER(SCHEDULESIZE);
RO.OBSERVE(CANVAS);
SCHEDULESIZE();
// EVENTS
CANVAS.ADDEVENTLISTENER("MOUSEMOVE", ONMOVE);
CANVAS.ADDEVENTLISTENER("MOUSEDOWN", ONDOWN);
CANVAS.ADDEVENTLISTENER("MOUSEUP", ONUP);
CANVAS.ADDEVENTLISTENER("CONTEXTMENU", ONCTXMENU);
CANVAS.ADDEVENTLISTENER("WEBGLCONTEXTLOST", ONCONTEXTLOST);
CANVAS.ADDEVENTLISTENER("WEBGLCONTEXTRESTORED", ONCONTEXTRESTORED);
// ANIMATION
STARTREF.CURRENT = PERFORMANCE.NOW();
FRAMEREF.CURRENT = 0;
FUNCTION TICK(NOW: NUMBER) {
IF (DISPOSED) RETURN;
IF (GL.ISCONTEXTLOST()) { RAFREF.CURRENT = REQUESTANIMATIONFRAME(TICK); RETURN; }
CONST T = (NOW - STARTREF.CURRENT) / 1000;
FRAMEREF.CURRENT += 1;
TRY {
GL.USEPROGRAM(PROGRAM!);
IF (RESIZESCHEDULED) APPLYSIZE();
CONST DPR = GETDPR();
CONST W = CANVAS.WIDTH, H = CANVAS.HEIGHT;
IF (URESOLUTION) GL.UNIFORM3F(URESOLUTION, W, H, DPR);
IF (UTIME) GL.UNIFORM1F(UTIME, T);
IF (UFRAME) GL.UNIFORM1I(UFRAME, FRAMEREF.CURRENT);
IF (UMOUSE) {
CONST M = MOUSEREF.CURRENT;
GL.UNIFORM4F(UMOUSE, M.X * DPR, M.Y * DPR, M.L, M.R);
}
GL.BINDVERTEXARRAY(VAO);
GL.DRAWARRAYS(GL.TRIANGLES, 0, 3);
} CATCH (ERR) {
DRAWERROR(GL, (ERR AS ERROR)?.MESSAGE ?? STRING(ERR));
}
RAFREF.CURRENT = REQUESTANIMATIONFRAME(TICK);
}
RAFREF.CURRENT = REQUESTANIMATIONFRAME(TICK);
FUNCTION CLEANUP() {
DISPOSED = TRUE;
IF (RAFREF.CURRENT) { CANCELANIMATIONFRAME(RAFREF.CURRENT); RAFREF.CURRENT = NULL; }
CANVAS.REMOVEEVENTLISTENER("MOUSEMOVE", ONMOVE);
CANVAS.REMOVEEVENTLISTENER("MOUSEDOWN", ONDOWN);
CANVAS.REMOVEEVENTLISTENER("MOUSEUP", ONUP);
CANVAS.REMOVEEVENTLISTENER("CONTEXTMENU", ONCTXMENU);
CANVAS.REMOVEEVENTLISTENER("WEBGLCONTEXTLOST", ONCONTEXTLOST);
CANVAS.REMOVEEVENTLISTENER("WEBGLCONTEXTRESTORED", ONCONTEXTRESTORED);
IF (RO) { TRY { RO.DISCONNECT(); } CATCH {} RO = NULL; }
TRY { IF (VBO) GL.DELETEBUFFER(VBO); } CATCH {}
TRY { IF (VAO) GL.DELETEVERTEXARRAY(VAO); } CATCH {}
TRY { IF (PROGRAM) GL.DELETEPROGRAM(PROGRAM); } CATCH {}
}
RETURN CLEANUP;
}, [FRAGSOURCE, PIXELRATIO]);
RETURN (
<DIV STYLE={{ POSITION: "ABSOLUTE", INSET: 0 }}>
<CANVAS REF={CANVASREF} STYLE={{ WIDTH: "100%", HEIGHT: "100%", DISPLAY: "BLOCK" }} />
</DIV>
);
}
/* ========= DEFAULT EXPORT: FULLSCREEN CONTAINER ========= */
EXPORT DEFAULT FUNCTION COMPONENT() {
RETURN (
<DIV
STYLE={{
POSITION: "FIXED",
INSET: 0,
WIDTH: "100VW",
HEIGHT: "100DVH",
BACKGROUND: "BLACK",
OVERFLOW: "HIDDEN",
}}
>
<SHADERCANVAS FRAGSOURCE={SHADER_SRC} />
</DIV>
);
}
DEMO.TSX
IMPORT COMPONENT FROM "@/COMPONENTS/UI/ASD";
EXPORT DEFAULT FUNCTION DEMOONE() {
RETURN <COMPONENT />;
}
```
IMPLEMENTATION GUIDELINES
1. ANALYZE THE COMPONENT STRUCTURE AND IDENTIFY ALL REQUIRED DEPENDENCIES
2. REVIEW THE COMPONENT'S ARGUMENS AND STATE
3. IDENTIFY ANY REQUIRED CONTEXT PROVIDERS OR HOOKS AND INSTALL THEM
4. QUESTIONS TO ASK
- WHAT DATA/PROPS WILL BE PASSED TO THIS COMPONENT?
- ARE THERE ANY SPECIFIC STATE MANAGEMENT REQUIREMENTS?
- ARE THERE ANY REQUIRED ASSETS (IMAGES, ICONS, ETC.)?
- WHAT IS THE EXPECTED RESPONSIVE BEHAVIOR?
- WHAT IS THE BEST PLACE TO USE THIS COMPONENT IN THE APP?
STEPS TO INTEGRATE
0. COPY PASTE ALL THE CODE ABOVE IN THE CORRECT DIRECTORIES
1. INSTALL EXTERNAL DEPENDENCIES
2. FILL IMAGE ASSETS WITH UNSPLASH STOCK IMAGES YOU KNOW EXIST
3. USE LUCIDE-REACT ICONS FOR SVGS OR LOGOS IF COMPONENT REQUIRES THEMAdds a render step. Works best with the HyperFrames or Remotion skills installed. Free, no sign-up.
Prompt by @pulkitxm. Prompts belong to their creators.
