Next.js Discord

Discord Forum

Rive Animation not showing up

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
I'm using typescript, and I've followed the documentation here: https://help.rive.app/runtimes/overview/react

Relevant part of the code bellow. What do I need to do to make it show up ?

import Rive from '@rive-app/react-canvas';
export const Simple = () => (
  <Rive src="https://cdn.rive.app/animations/vehicles.riv" />
);
return (
    <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
        <Simple />
      <Link
        href="/"
        className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm"
      >
        <svg
//..
Answered by Sun bear
// components/RiveLogo.tsx
'use client';
import { useRive } from '@rive-app/react-canvas';
import { useTheme } from 'next-themes';

function RiveLogoComponent(props: { src: string }) {
  const { RiveComponent } = useRive({
    src: props.src,
    autoplay: true,
  });

  return <RiveComponent />;
}

const RiveLogo = () => {
  const { resolvedTheme } = useTheme();
  console.log("Current theme:", resolvedTheme); // Log the current theme
  const logoSrc = resolvedTheme === 'dark' 
  ? "/static/JobsBringerLogoDarkAnimated.riv" 
  : "/static/JobsBringerLogoLightAnimated.riv";

  return (
    <div style={{ 
      width: '224px', 
      height: '224px', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center',
      marginTop: '-24px' // Added negative top margin
    }}>
      <RiveLogoComponent key={resolvedTheme} src={logoSrc} />
    </div>
  );
};

export default RiveLogo;

So I've made the Rive Logo its own component because it has to be a client component, the code above is for the component.

Then in the page where I needed to use it I added this import line:

import RiveLogo from '@/components/RiveLogo';
//and in the UI, after the return statement I simply did this
<Rive Logo/>
View full answer

56 Replies

So this is after you put “use client” ?
Sun bearOP
That's right, I am using "use client".
Mini Rex
@Sun bear did you get anything working?
@Mini Rex <@998405690718703696> did you get anything working?
Sun bearOP
Yes of course
Mini Rex
I got rive working with turbopack but webpack fails. Do you have any special settings in your next.js.config to get this to work?
Sun bearOP
What's your project structure ? Are you using SSR + App Directory too ?
Mini Rex
yes app directory, ssr but the rive thingy is in a component with use client at the top
Sun bearOP
Awesome, let me show you how I've solved it
Sun bearOP
// components/RiveLogo.tsx
'use client';
import { useRive } from '@rive-app/react-canvas';
import { useTheme } from 'next-themes';

function RiveLogoComponent(props: { src: string }) {
  const { RiveComponent } = useRive({
    src: props.src,
    autoplay: true,
  });

  return <RiveComponent />;
}

const RiveLogo = () => {
  const { resolvedTheme } = useTheme();
  console.log("Current theme:", resolvedTheme); // Log the current theme
  const logoSrc = resolvedTheme === 'dark' 
  ? "/static/JobsBringerLogoDarkAnimated.riv" 
  : "/static/JobsBringerLogoLightAnimated.riv";

  return (
    <div style={{ 
      width: '224px', 
      height: '224px', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center',
      marginTop: '-24px' // Added negative top margin
    }}>
      <RiveLogoComponent key={resolvedTheme} src={logoSrc} />
    </div>
  );
};

export default RiveLogo;

So I've made the Rive Logo its own component because it has to be a client component, the code above is for the component.

Then in the page where I needed to use it I added this import line:

import RiveLogo from '@/components/RiveLogo';
//and in the UI, after the return statement I simply did this
<Rive Logo/>
Answer
Sun bearOP
If you do it like I did it you will be able to have the logo switch between light / dark mode variants if you have 2 variants of the logo for both modes, otherwise you can just clean it up and use it normally without theme switching but try it out, it should work.
Mini Rex
I don't use the hook but that shouldn't matter. I essentially do the same as you above.
It works perfectly fine for me as long as I use turbopack in local dev mode. It just stops working on webpack. Can you share anything that's special about your next.config.js?
Sun bearOP
Uhm, I don't do anything special in my next config, here it is:
/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig
Oh, hold on. Did you install the correct package for Rive ?
Let me check what I have installed cause you have to install like a package for it
This is the package I have instaleld for it "@rive-app/react-canvas": "^4.6.2",
Mini Rex
I have this: "@rive-app/react-canvas": "^4.7.1",
What nextjs version are you on?
I'm on "next": "^14.0.4",
Sun bearOP
"next": "latest",
Are you using a .riv file for your animation or are you using some sort of a link ? Cause I personally used a .riv file as the source.
Try using the hook, I think the hook is required and they have some stuff in here https://www.npmjs.com/package/@rive-app/react-canvas?activeTab=code
Mini Rex
I'm using a .riv file in my public folder. The thing is everything is beautiful during development, I see the file and it's happy. When running with webpack however it blows up. I assumed it was something that turbopack does by default that I have to tell webpack to do on its own. But now I'm suspecting there's a difference in this:

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: config => {
        config.module.rules.push({
                test: /index\.js$/,
                // include: [path.resolve(__dirname, 'output')],
                loader: 'string-replace-loader',
                options: {
                    search: '// use client',
                    replace: '"use client";'
                }
            }
        )

        return config
    },
    experimental: {
        turbo: {
            rules: {
                // Option format
                'index.js': [
                    {
                        loader: 'string-replace-loader',
                        options: {
                            search: '// use client',
                            replace: '"use client";'
                        }
                    },
                ],
            },
        },
    },

}

module.exports = nextConfig
Sun bearOP
Hmm, I'd try to have it run without the turbopack and using the hook just as a test to see if it runs.
Mini Rex
Okay, I can try that tomorrow, thank you for your help so far. I'm not using JS/TS so hooking up the hook is a bit more involved for me
Sun bearOP
They also have a repo with examples here if you want to check it out https://github.com/rive-app/rive-react
@Mini Rex Okay, I can try that tomorrow, thank you for your help so far. I'm not using JS/TS so hooking up the hook is a bit more involved for me
Sun bearOP
Gotcha I hope you will be able to solve it. I recently switched from using Rive to using css since my animation was pretty simple and now my logo loads instantly (rive loaded slower) and it had an issue where the logo wasn't vectorized for some reason.
Let me show you the speed
Sun bearOP
Even better I will show you the difference between using Rive and using CSS in terms of loading speed
Mini Rex
Yeah looks like Rive is a bit overkill for that 😄
Oh man, I couldn't resist
Used the hook and now it works. I didn't have much faith but now I'm delighted 😄
Mini Rex
Thank you very much for your help
@Mini Rex Used the hook and now it works. I didn't have much faith but now I'm delighted 😄
Sun bearOP
Awesome! I'm glad to hear that it worked!

By the way I've updated the video so that you can see the differences a bit better. This is just for you in the future to know that if speed becomes an issue you can try switching to CSS animations instead (someone helped me with the animation by the way, they are a code wizard and basically knew what they were doing :D)
Mini Rex
Yeah rive renders to canvas which has a fixed size and doesn't become larger when you zoom in
Maybe you can compare the speed differences by throttling the network speed in safari:
Sun bearOP
Do you get the same issue with your animation ? As in does it load slower than the rest of the page ?
Yes, I also have that, but it's very minor, I don't mind it.
@Mini Rex Yes, I also have that, but it's very minor, I don't mind it.
Sun bearOP
Oh yeah it's like minimal, and in my case I think it was a bit slower since I used next themes but with only one version it would've probably loaded a bit faster. Eh I would've not even touched CSS by myself, I just got lucky cause someone here wanted to help me do it via CSS since it's way faster 😄 so that's what I'm using now.
Mini Rex
it's only a few frames for me I think
according to my network tab it loads for 30ms which is less than two frames
but this is the deployed optimised version
locally maybe it's slower
Original message was deleted
Sun bearOP
Right, yeah that's sort of what I expected. The flashing is still there but it's not that bothering and I don't think regular users would mind it. They'll probably only see this screen a few times anyway it's not like they'd be visiting this screen that often.
For me it was a bit bothering since I'm using the same animation in my top nav bar so they would've had to deal with that flashing every time they'd load the website 😄
Mini Rex
yeah that's a good point
I'll also use some static version of the logo elsewhere
hard to do after putting quite a bit of effort into it 😄
@Mini Rex yeah that's a good point
Sun bearOP
Most regular users wouldn't even notice it probably 😄 It's mostly us the developers that pay attention to these details.
Mini Rex
if you don't pay attention to that, you get horrible websites like Amazon, so I think it's good 😄
anyway now I really need to go to bed, thanks again
Sun bearOP
https://tenor.com/view/youre-welcome-gif-25058970
Solved.