Setting Up the Package Configuration

 

Create a new file named package.json at the root of your Bolt.new AI project. This file lists your project dependencies. Since Bolt.new AI doesn’t support a terminal, manually add the following code into the file to “install” the required packages, including React and Framer Motion.

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "framer-motion": "^7.6.3"
  },
  "devDependencies": {
    "typescript": "^4.5.4"
  }
}

 

Creating the Framer Integration Component

 

In your project’s src folder, create a new file named FramerIntegration.tsx. This file will contain a React component that uses Framer Motion to add simple animations. Paste the following code snippet into the file.

import * as React from 'react';
import { motion } from 'framer-motion';

type Props = {
  text: string;
};

const FramerIntegration: React.FC = ({ text }) => {
  return (
    
      
{text}
    
  );
};

export default FramerIntegration;

 

Modifying the Main Application File

 

Open your main application file. This file is usually named App.tsx or index.tsx in the src folder. Insert the following snippet to import and render the Framer integration component.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FramerIntegration from './FramerIntegration';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

 

Ensuring a Proper HTML Host

 

Make sure your project contains an HTML file that provides a container for your React application. Create or update the index.html file at the root of your project (or within a designated public folder) with the following content.

 

Final Integration Check

 

Review your project structure to ensure all changes are in place:

• A package.json file at the root listing the required dependencies.
• A src/FramerIntegration.tsx file containing your Framer Motion component.
• Your main file (App.tsx or index.tsx) imports and renders the Framer component.
• An index.html file that provides a 'root' element for rendering.

With these steps complete, your Bolt.new AI project is now integrated with Framer via a custom React component built in TypeScript.