3DTextMaker

embed interactive 3D text on their on their designs or websites

Comment

Inspiration

To Allow users to create artistic 3D text designs for posters, digital art, and social media

What it does

3DTextMaker tool designed to create visually appealing 3D text effects, primarily for use in Canva designs. this app simplifies the process of creating 3D text effects and seamlessly integrates this functionality into the Canva design workflow.

  1. Text Input: Users can enter any text they want to convert into a 3D effect.
  2. Font Customization: The app offers a selection of different fonts, allowing users to choose the style that best fits their design needs.
  3. 3D Effect Creation: It generates a 3D effect by creating a shadow of the text. Users can adjust the shadow length to control the depth of the 3D effect.
  4. Real-time Preview: As users make changes to the text, font, or shadow length, they can see the results immediately in an SVG preview.
  5. AI-Powered Text Suggestions: The app includes a feature where users can enter a prompt, and it will generate AI-suggested text options related to that prompt. This can help with creative ideation.

How we built it

We started by setting up a React application using Create React App, which provides a modern build setup with no configuration. Integrating SVG : SVG was integrated to manage and manipulate 3D text. We imported specific modules from Canva apps SDK to enable upload of 3D design and use within our React components. Imported components from App Ui Kit. We added an input range slider to control the effect applied to font size and sadow length. The slider’s value dynamically updated the SVG 3D text in real-time, leveraging state management with React. created functions to apply 3D transformations to the images. they can see the results immediately in an SVG preview. This included font size and shadow length.

Challenges we ran into

One of the initial challenges was leveraging Canva apps starter kit with SVG and saving data as url. Ensuring that the Svg preview updated in real-time as the slider value changed was another challenge. How to update input to 3D text.

Accomplishments that we're proud of

developed activity based on 3D design effect that boosts fun in Canva

What we learned

we learned about How to generate 3d text tool . also how to add image to Canva design

What's next for 3DTextMaler

Built With

Share this project:

Updates