Setup Layout or parent component

// layout.tsx or component parent just need to use the div outside the element
import {
  SquiCircleFilterStatic,
  SquiCircleFilter,
} from "@/components/v1/skiper63";

const Layout = ({ children }) => {
  return (
    <div>
      <SquiCircleFilter blurValue={10} colorMatrixValue={20} alphaValue={-7} />
      {children}
    </div>
  );
};

important

• Don't mess with the props values alot it can mess up the whole div so try to just use the light variations and see magic
• use the same id on the filter as mentioned in the SquiCircleFilter or if you use the SquiCircleFilterStatic

How to apply squicircle effect

// whatever element has this filter set will have the squicircle effect
const MyComponent = () => {
  return (
    <div style={{ filter: "url(#SquiCircleFilter)" }}>Your content here</div>
  );
};

Thats it now the element with this filter will have the coooooool apple's squicircle effect.

also if you want things to be simpler

// layout.tsx or component parent just need to use the div outside the element
import { SquiCircleFilterStatic } from "@/components/v1/skiper63";

const Layout = ({ children }) => {
  return (
    <div>
      <SquiCircleFilterStatic />
      {children}
    </div>
  );
};

// whatever element has this filter set will have the squicircle effect
const MyComponent = () => {
  return (
    <div style={{ filter: "url(#SkiperSquiCircleFilterLayout)" }}>
      Your content here
    </div>
  );
};