In the world of shaders programming, the equivalent of a "Hello, World!" application is typically a simple solid color display.

Let's fill the canvas with solid red color:

import { Color, Player, Shader } from "@react-shader/fiber";
 
const HelloWorld = () => {
  return (
    // You can specify size of your canvas
    <Player width={300} height={300}>
      <Shader>
        {/* Child of Shader component (color) will be assigned to the result */}
        <Color hex={"#ff055c"} />
      </Shader>
    </Player>
  );
};
 
export default HelloWorld;

In the example above, we used the following components:

• The Player is a component that creates a canvas and draws a WebGL shader on it.
• The Shader component is the main container for your shader. It should contain a color or any component that represents a color, such as Vec4 or a custom component that returns a color.
• Color is a wrapper around the native Vec4 component that adds syntax sugar to represent colors in hex format. It can also accept the props r, g, b, a to set colors by providing RGBA values.