How i use the folder in react

hi i just want to know the folder which is located in the jewellery section in the documentation , i downloaded this jewellery folder but i dont know how i use this in the effect section in the react app

Hi Rejadaud,

Please share where you download the, I’ll check the contents and confirm for you how to run it in the react sample.


here i downloaded the folder from banuba documentation please help me how i run this file effect in react , however i downloaded the only one effect which is which is running in my react app , but i don’t know how to run all these effects (earrings,rings, necklace)which are combine in folder

here i attached the folder (its not working)

and ears_decoration (which is currently running in my react app )


// App.jsx
import React, { useEffect, useRef, useState } from “react”;
import { BANUBA_CLIENT_TOKEN } from “./BanubaClientToken”;
import { Webcam, Player, Module, Effect, Dom } from “@banuba/webar”;
import wasm from “@banuba/webar/BanubaSDK.wasm”;
import simd from “@banuba/webar/BanubaSDK.simd.wasm”;
import data from “@banuba/webar/”;
import faceTracker from “@banuba/webar/”;

import “./App.css”;

function App() {
const ref = useRef({});
const [isEffectVisible, setEffectVisible] = useState(true);

// Toggle the visibility of the effect
const toggleEffectVisibility = () => {

// componentDidMount
useEffect(() => {
const webcam = ( ??= new Webcam());
const promise = (ref.current.player ??= Player.create({
locateFile: {
“BanubaSDK.wasm”: wasm,
“BanubaSDK.simd.wasm”: simd,
“”: data,
}).then((player) =>
player.addModule(new Module(faceTracker)).then(() => {

    if (isEffectVisible) {
      player.applyEffect(new Effect("effects/


    Dom.render(player, "#webar");

return () => {

}, [isEffectVisible]);

return (


<div id=“webar” className={webar-container ${isEffectVisible ? "visible" : ""}}>

Toggle Effect


export default App;
here is the code where i want to run the effect

i downloaded folder from here.

Thanks for following up Rajadaud,

Regrettably you are looking at our legacy documentation and a legacy effect. These will not work with our Web SDK (react js or not)

For any new jewelry you’d either need to purchase it from the Banuba Asset Store, or to develop your own using the Banuba Web AR Studio

For Asset Atore effects - contact your assigned Account Manager for assistance, or request via the store and they will contact you directly.

Useful links: How to apply physics to an effect

sir , can you please give me some necklace effect as a trail so i would able to purschase them from store or can you help me where can i develop some jewellery effect?

Regrettably we do not have any jewelry effects that can be shared publicly at the moment.
The only publicly available demo effects are located here

For now I recommend contacting us via Support for Banuba SDKs | Face AR SDK and Video Editor SDK with more details on what kind of necklace effect you need, and we will see what might be possible.

Also, its best to understand that there are some limitation in regards to how a necklace effect can function, as we do not detect a 3D body with which to collide the necklace.