Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Build UI interactions in Rive like this smooth, responsive disclosure inspired by Nitish Khagwal. Using the Layout direction feature (in Early Access), it just takes a single property to add support for RTL languages and you can populate your text dynamically at runtime.

philterdesign's profile picture

Philip Chung

1,362 subscribers

30,683 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

4 Kommentare

Profilbild von Kamil Bachanek
Kamil Bachanekvor 1 Jahr

@rive_app @nitishkmrk With over a time, this kinda animations makes me thinking that rive is actually the future tool for UI/UX Designers...

Profilbild von CodeRabbit
CodeRabbitvor 1 Jahr

AI-first pull request reviewer with context-aware feedback, line-by-line code suggestions, and real-time chat.

Profilbild von Robin | Game dev ᕕ(ᐛ)ᕗ
Robin | Game dev ᕕ(ᐛ)ᕗvor 1 Jahr

@rive_app @nitishkmrk This ends up being in a canvas, or does it generate html/css?

Profilbild von Philip Chung
Philip Chungvor 1 Jahr

@rive_app @nitishkmrk On web it renders to a canvas.

Ähnliche Videos

🚨 New feature alert! New Layout direction lets you flip your layouts to flow right to left. It's perfect for localization and automatic UI reflow in RTL languages like Arabic and Persian. Got a progress bar that fills up for high scores? Now you can flip the layout direction and drain down for health.
0:56

🚨 New feature alert! New Layout direction lets you flip your layouts to flow right to left. It's perfect for localization and automatic UI reflow in RTL languages like Arabic and Persian. Got a progress bar that fills up for high scores? Now you can flip the layout direction and drain down for health.

Rive

11,576 Aufrufe • vor 1 Jahr

Portfolio accordion interaction made in Rive using the Layouts feature. Inspired by this post:
0:32

Portfolio accordion interaction made in Rive using the Layouts feature. Inspired by this post:

Drawsgood

12,255 Aufrufe • vor 1 Jahr

Using layout, scrolling and trim path features in Rive to build a custom scrollbar imagined by Dru. Since the scroll bar is just a vector, you can create any path shape you want and run it on any of our runtimes.
0:42

Using layout, scrolling and trim path features in Rive to build a custom scrollbar imagined by Dru. Since the scroll bar is just a vector, you can create any path shape you want and run it on any of our runtimes.

Philip Chung

14,610 Aufrufe • vor 1 Jahr

Inspired by Nitish Khagwal , powered by React Native, Expo, Software Mansion's Reanimated layout animations. Running on both iOS and Android. Shall I record a video tutorial about it?
0:30

Inspired by Nitish Khagwal , powered by React Native, Expo, Software Mansion's Reanimated layout animations. Running on both iOS and Android. Shall I record a video tutorial about it?

Catalin Miron - AnimateReactNative.com

25,818 Aufrufe • vor 1 Jahr

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.
0:30

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.

balint

185,530 Aufrufe • vor 11 Monaten

📢 Text Follow Path is in Early Access! Align text along a shape, dynamically adjust placement, and even bind it to data.
0:20

📢 Text Follow Path is in Early Access! Align text along a shape, dynamically adjust placement, and even bind it to data.

Rive

82,743 Aufrufe • vor 1 Jahr

You can just build it all in Rive and then plop it basically anywhere
0:27

You can just build it all in Rive and then plop it basically anywhere

Drawsgood

19,713 Aufrufe • vor 1 Jahr

Got this loaded using the Rive Apple runtime! It utilizes scripting, cool to see it all working in the simulator.
0:21

Got this loaded using the Rive Apple runtime! It utilizes scripting, cool to see it all working in the simulator.

Drawsgood

12,367 Aufrufe • vor 4 Monaten

Send Money Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal
0:21

Send Money Interaction ✧ Made with Tailwind and Framer Motion. Inspired by Nitish Khagwal

LN

10,757 Aufrufe • vor 1 Jahr

tutorial time~ you can add your watermark as sticker for easy access or just type out your username using text features ♡
0:31

tutorial time~ you can add your watermark as sticker for easy access or just type out your username using text features ♡

ira | dm for ticketing service ¨̮

363,935 Aufrufe • vor 3 Monaten

How to Build a Creative Business: The Rippaverse Way This is our first text-based book, a new direction for us, and I'm excited to share it with you. This should be helpful for aspiring creators in various creative fields. Thanks for your support!
1:13

How to Build a Creative Business: The Rippaverse Way This is our first text-based book, a new direction for us, and I'm excited to share it with you. This should be helpful for aspiring creators in various creative fields. Thanks for your support!

Eric July

42,902 Aufrufe • vor 4 Monaten

🎉 Free Rive File with Physical Interactions! 🎉 I just experimented with physical interactions in Rive, and the results are amazing! Performance is solid, and it leaves a great impression on viewers. 💡 Get the Rive file for free! Comment "Rive" below to receive it! 👇
1:23

🎉 Free Rive File with Physical Interactions! 🎉 I just experimented with physical interactions in Rive, and the results are amazing! Performance is solid, and it leaves a great impression on viewers. 💡 Get the Rive file for free! Comment "Rive" below to receive it! 👇

Chien Pham

34,969 Aufrufe • vor 1 Jahr

Introducing Data Binding Artboards! Now you can dynamically load an artboard from a separate Rive file. Swap in avatars, toggle views, A/B test layouts, and load any other type of component from an external Rive file at runtime. Audio on 🔊
0:41

Introducing Data Binding Artboards! Now you can dynamically load an artboard from a separate Rive file. Swap in avatars, toggle views, A/B test layouts, and load any other type of component from an external Rive file at runtime. Audio on 🔊

Rive

17,020 Aufrufe • vor 11 Monaten

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.
0:43

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.

Meng To

32,205 Aufrufe • vor 2 Jahren

the New Aqua button inspired by iPhone 16e entirely made in Rive with Layout + Vector Feathering. — Fluent — Native 120 FPS (on my display) — Dynamic text support — 5KB — Infinite and fast zoom, without detail loss — works everywhere straight away
0:33

the New Aqua button inspired by iPhone 16e entirely made in Rive with Layout + Vector Feathering. — Fluent — Native 120 FPS (on my display) — Dynamic text support — 5KB — Infinite and fast zoom, without detail loss — works everywhere straight away

Dimitri Novikov 🇺🇦

17,146 Aufrufe • vor 1 Jahr

I built a service desk agent using ElevenLabs’ new Conversational AI Agents feature. Watch the video to see how responsive it is! Previously, I used ElevenLabs for cloning my voice and used my generated voice for narrations in some of my youtube videos. This feature takes elevenlabs' voice AI to a whole new level! It simplifies systems that used to require separate TTS (text-to-speech) and STT (speech-to-text) processes for both sides of the conversation. Now, it’s much simpler! Create your own agent here What will you create with this?
3:29

I built a service desk agent using ElevenLabs’ new Conversational AI Agents feature. Watch the video to see how responsive it is! Previously, I used ElevenLabs for cloning my voice and used my generated voice for narrations in some of my youtube videos. This feature takes elevenlabs' voice AI to a whole new level! It simplifies systems that used to require separate TTS (text-to-speech) and STT (speech-to-text) processes for both sides of the conversation. Now, it’s much simpler! Create your own agent here What will you create with this?

Melvin Vivas

27,722 Aufrufe • vor 1 Jahr

You can now literally clone your voice in the Grok API and use it instantly for voice-powered services Build your own assistant and customer support that takes your calls and runs your business with your voice It’s incredibly easy to set up and takes less than 4 mins to train your voice Just select "Clone a Voice" and read the prompt exactly as shown For the best results, record in a quiet room so Grok can capture your voice as clearly as possible You can also choose from an amazing built-in voice library, with support for 20+ languages and multiple expressive voice options
0:53

You can now literally clone your voice in the Grok API and use it instantly for voice-powered services Build your own assistant and customer support that takes your calls and runs your business with your voice It’s incredibly easy to set up and takes less than 4 mins to train your voice Just select "Clone a Voice" and read the prompt exactly as shown For the best results, record in a quiet room so Grok can capture your voice as clearly as possible You can also choose from an amazing built-in voice library, with support for 20+ languages and multiple expressive voice options

X Freeze

78,863 Aufrufe • vor 1 Monat