Loading video...

Video Failed to Load

Go Home

in this effect, im using `PointerEvent` to get the cursor position. then calculating a progress value (0 to 1) based on where your cursor is relative to the book's spine. each page then uses `calc()` to multiply its target rotation by the progress.

sorenblank's profile picture

Soren

7,182 subscribers

266,898 views • 7 months ago •via X (Twitter)

ArtsEducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Cursor is now available in Jira. Assign Cursor to work items, or mention @​Cursor in a comment to kick off a cloud agent. Cursor uses the title, description, comments, and your team's repository settings to create a merge-ready PR.
0:32

Cursor is now available in Jira. Assign Cursor to work items, or mention @​Cursor in a comment to kick off a cloud agent. Cursor uses the title, description, comments, and your team's repository settings to create a merge-ready PR.

Cursor

258,952 views • 1 month ago

Cursor ultra tip connect cursor to chrome ask the ai to browse a website then ask it to create a clone get a similar website in minutes🤯
0:39

Cursor ultra tip connect cursor to chrome ask the ai to browse a website then ask it to create a clone get a similar website in minutes🤯

Fili

206,972 views • 1 year ago

I forgot to turn on my cursor last time. This is actually a toggle. When activated, the hand follows the cursor position🧐
0:31

I forgot to turn on my cursor last time. This is actually a toggle. When activated, the hand follows the cursor position🧐

0x4682B4💾

13,853 views • 9 months ago

Awesome Rive file by Marvin Te. Using Data Binding to delay the cursor position
0:35

Awesome Rive file by Marvin Te. Using Data Binding to delay the cursor position

Guido Rosso

27,879 views • 1 year ago

Cursor ultra tip find an inspiring github repo turn it into docs and feed it to cursor ask the ai to build based on the doc get MVP in one prompt🤯
0:43

Cursor ultra tip find an inspiring github repo turn it into docs and feed it to cursor ask the ai to build based on the doc get MVP in one prompt🤯

Fili

161,759 views • 1 year ago

Have you started to write code with Cursor using AI but don’t know how to deploy it? Just use Replit’s new 1-click “Connect to Cursor” button. It’s the easiest way to get your project live on the internet for you to share. Takes <5min to deploy.
9:25

Have you started to write code with Cursor using AI but don’t know how to deploy it? Just use Replit’s new 1-click “Connect to Cursor” button. It’s the easiest way to get your project live on the internet for you to share. Takes <5min to deploy.

Mckay Wrigley

154,202 views • 1 year ago

A better way to use Cursor: I call it "Pilot" mode - Use "Ask" to request a feature or report a bug. - Then click "Apply" to update your files. This method is faster because Cursor doesn’t need to apply diffs against the code. Plus, if you include the project tree, you’ll get even quicker results. (Check out how to do project tree in the comment)
0:47

A better way to use Cursor: I call it "Pilot" mode - Use "Ask" to request a feature or report a bug. - Then click "Apply" to update your files. This method is faster because Cursor doesn’t need to apply diffs against the code. Plus, if you include the project tree, you’ll get even quicker results. (Check out how to do project tree in the comment)

Alireza Bashiri

87,704 views • 1 year ago

Mention @​Cursor to kick off tasks in Slack and see updates of its work streaming in real time. Cursor uses context in the thread and broader channels to create a PR for you to review and ship.
0:24

Mention @​Cursor to kick off tasks in Slack and see updates of its work streaming in real time. Cursor uses context in the thread and broader channels to create a PR for you to review and ship.

Cursor

139,653 views • 2 months ago

🔥 🎥 ➡️ o1 FULL is available in Cursor NOW!!! watch to see how you can use this workflow in Cursor: >>> o1 is the ARCHITECT: brainstorm with o1 and it creates a step-by-step plan for implementation and then... >>> >>> Sonnet 3.5 is the ENGINEER: takes the o1 generated plan and implements it FAST shame that there's no access to o1 BEAST mode via API yet, but it's very useful to have o1 in Cursor and be able to connect it to your full codebase PSA: the o1 Cursor requests are charged on a pay as you go basis, so don't go too crazy and lose your house
4:07

🔥 🎥 ➡️ o1 FULL is available in Cursor NOW!!! watch to see how you can use this workflow in Cursor: >>> o1 is the ARCHITECT: brainstorm with o1 and it creates a step-by-step plan for implementation and then... >>> >>> Sonnet 3.5 is the ENGINEER: takes the o1 generated plan and implements it FAST shame that there's no access to o1 BEAST mode via API yet, but it's very useful to have o1 in Cursor and be able to connect it to your full codebase PSA: the o1 Cursor requests are charged on a pay as you go basis, so don't go too crazy and lose your house

Dan Mac

38,294 views • 1 year ago

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇
1:10

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

408,697 views • 2 years ago

CLAUDE + CURSOR + REPLIT = MAGIC (FULL VIDEO TUTORIAL) You can now write create complex web apps with just english (No copy - paste) using the BEST AI Code generation tool on the market - Cursor. The only problem with cursor for a coding beginner like me, is that its not that easy to deploy web apps. Well, Replit ⠕ makes deploying web apps and creating templates incredibly easy. In this video goes over how to sync Cursor and Replit. And then using our new template we made an AI version of Trello by Atlassian in like 6 or 7 cursor composer prompts. --------------------- In this video: 00:00 - Intro 04:08 - Syncing Cursor and Replit 07:40 - setting up Firebase 10:27 - Using Cursor and Replit to Create Trello Front End 19:41 - Setting up Backend API endpoint (we will make dedicated video on this soon w/template) 21:09 - Adding AI features to Trello!
27:19

CLAUDE + CURSOR + REPLIT = MAGIC (FULL VIDEO TUTORIAL) You can now write create complex web apps with just english (No copy - paste) using the BEST AI Code generation tool on the market - Cursor. The only problem with cursor for a coding beginner like me, is that its not that easy to deploy web apps. Well, Replit ⠕ makes deploying web apps and creating templates incredibly easy. In this video goes over how to sync Cursor and Replit. And then using our new template we made an AI version of Trello by Atlassian in like 6 or 7 cursor composer prompts. --------------------- In this video: 00:00 - Intro 04:08 - Syncing Cursor and Replit 07:40 - setting up Firebase 10:27 - Using Cursor and Replit to Create Trello Front End 19:41 - Setting up Backend API endpoint (we will make dedicated video on this soon w/template) 21:09 - Adding AI features to Trello!

Riley Brown

309,183 views • 1 year ago

"What is the prompt?" Watch a 1-minute demo on building a dashboard using selected AI prompts in Cursor - Choose your framework - Pick a category: Planning, Building, App, Website - Pick the Editor: Cursor, Windsurf, Cline, Copilot Then put it together like LEGO bricks.
0:59

"What is the prompt?" Watch a 1-minute demo on building a dashboard using selected AI prompts in Cursor - Choose your framework - Pick a category: Planning, Building, App, Website - Pick the Editor: Cursor, Windsurf, Cline, Copilot Then put it together like LEGO bricks.

Kevin Kern

134,257 views • 1 year ago

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?
0:59

At this point, I have become lazy af. Figma connected to Cursor via my MCP and Opus 4.6 is designing a dashboard using Shadcn design system which is in the team library. So you chat in cursor, get designs in figma. Everything is designed according to your design system. Is this the dream of a designer?

AK

91,829 views • 4 months ago

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!
0:45

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

Tyler Shukert

203,451 views • 1 year ago

This is how a top designer uses Figma MCP + Cursor Every designer should copy this workflow to get 90% of the design prototype ready super quick 👀 Watch the full interview on Sneak Peek: Jeff JB shows how the Webflow design team uses Figma MCP + Cursor 👇
1:31

This is how a top designer uses Figma MCP + Cursor Every designer should copy this workflow to get 90% of the design prototype ready super quick 👀 Watch the full interview on Sneak Peek: Jeff JB shows how the Webflow design team uses Figma MCP + Cursor 👇

Jayneil Dalal

42,082 views • 8 months ago

I asked Google DeepMind Gemini 3.1 Pro watch the launch video of Cursor SDK and create a production script. Then tasked it to re-create the video 1:1 with Remotion 0-shot. Video Understanding capabilities.🔥Original cursor video in answer thread.
0:35

I asked Google DeepMind Gemini 3.1 Pro watch the launch video of Cursor SDK and create a production script. Then tasked it to re-create the video 1:1 with Remotion 0-shot. Video Understanding capabilities.🔥Original cursor video in answer thread.

Philipp Schmid

23,463 views • 2 months ago

Cursor ultra tip Feed a repo into cursor ask the ai to reverse engineer it's prompt improve the prompt and send it to cursor get mvp in one shot🤯
0:59

Cursor ultra tip Feed a repo into cursor ask the ai to reverse engineer it's prompt improve the prompt and send it to cursor get mvp in one shot🤯

Fili

65,426 views • 1 year ago

"Create a video project announcing Agent Skills, following Cursor brand rules. 1920×1080, 60fps. Typewriter text effect at about 1 character per frame, then hold for 3 seconds after typing on every title card. Line 1 types first, then line 2. Card 1: “Agent Skills are now available” on line 1 and “in Cursor” on line 2 Card 2: “Skills let agents discover and run” and line 2 “specialized prompts and code.” Then play the skills.mp4 recording full-screen, framed top-aligned for first 2 seconds, then zoom in (with easing) to the top-left by about 125%. Should be continuous zoom! Final card: “This video was made entirely in Cursor" on line 1 and "with Remotion skills.” on line 2, then hold; End with the existing end.mp4 animation full-screen. Render and open the file inside Cursor’s browser tool to let me see it here!" 1. Uses an existing screen recording eric zakariasson made. 2. Uses our existing end card animation. 3. Had a Cursor rule with our brand guidelines and colors.
4:07

"Create a video project announcing Agent Skills, following Cursor brand rules. 1920×1080, 60fps. Typewriter text effect at about 1 character per frame, then hold for 3 seconds after typing on every title card. Line 1 types first, then line 2. Card 1: “Agent Skills are now available” on line 1 and “in Cursor” on line 2 Card 2: “Skills let agents discover and run” and line 2 “specialized prompts and code.” Then play the skills.mp4 recording full-screen, framed top-aligned for first 2 seconds, then zoom in (with easing) to the top-left by about 125%. Should be continuous zoom! Final card: “This video was made entirely in Cursor" on line 1 and "with Remotion skills.” on line 2, then hold; End with the existing end.mp4 animation full-screen. Render and open the file inside Cursor’s browser tool to let me see it here!" 1. Uses an existing screen recording eric zakariasson made. 2. Uses our existing end card animation. 3. Had a Cursor rule with our brand guidelines and colors.

edwin

73,538 views • 5 months ago

Pro tip for Cursor Use .cursorrules in your project to get the most optimised code generations with Cursor There's a lot here
0:22

Pro tip for Cursor Use .cursorrules in your project to get the most optimised code generations with Cursor There's a lot here

Melvin Vivas

101,039 views • 1 year ago

Now ready for deployment: Cursor Delegate any Linear issue to Cursor, and a background agent will get to work. Once the task is complete, the Cursor agent will update the issue automatically with a PR.
0:42

Now ready for deployment: Cursor Delegate any Linear issue to Cursor, and a background agent will get to work. Once the task is complete, the Cursor agent will update the issue automatically with a PR.

Linear

2,514,178 views • 10 months ago