Advanced visual development environment for web professionals
watch video

create

html, css

and whoa!

visually.

Infinite Studio can help make your every vision a reality without binding you to frameworks, templates or themes. Stop dreaming, start doing!

features

Flexbox
Motion Path
3D Transforms
CSS Animations
CSS Transitions
CSS Shapes
CSS Filters
2D Canvas
Video Filters
Custom Media Queries
External Data
Plugins
Extensions
Variables
Custom Datatypes
JS Expressions
Math Nodes
Wave Functions
Array Interpolations
Tweens
SVG Authoring
SVG Import
SVG Filter Effects
Backdrop Filters
Canvas Pixel Effects
Bitmap Modifiers
Particle Effects
Custom Scripts
Persist-able Objects
Sockets
Local Storage
Remote Storage
Multiple Pages
PushState
Pre-Loaders
Loading Events
Master Layouts
Components
Asset Manager
CDN Hosting
Image Sequences
Dynamic Image Processing
Dynamic Elements
Text Effects
Text Paths
Blend Modes
Multiple Backgrounds
Background Blend Modes
Shadows
Gradients
Path Editor
Dynamic Paths
Path Modifiers
Mouse Events
Touch Events
Media Time Events
Scroll Events
Custom Events
Oscillator Functions
Audio Filters
AudioBuffer
Interface Sounds
Parallax Scrolling
Scroll Limits
Scroll Offset
Media Queries
Custom Breakpoints
Feature Queries
Multiple Viewports
WebAudio
Endless Possibilities

HybridWorkspace

Design for the web in 2D/3D.

CSS 3D transforms, layer level control of 3D perspective and matrix transforms.

MultipleViewports

Preview responsive designs as you build your site.

Multiple viewports, realtime device and browser preview, collaborative editing.

Data DrivenDesign

Design and build your site using real data

Iterate arrays and list items from JSON, CSV, etc.

Advanced visual web authoring
Visually manage the dom
Add custom html
Native tags or custom elements

html

Create HTML, add attributes and styles. Manage dom nodes visually. Import or paste existing HTML and styles

Authoring, Importing and Styling SVG Elements
Create, paste and edit path data
Paste SVG from any vector editor
Editor for advanced filter nodes

svg

Create SVG elements inline or paste existing SVG code from your favorite editor. Edit SVG element attributes or use CSS for styling. Supports advanced filters, clipping paths, masks, etc. Animate attributes using state transitions or javascript expressions.

Advanced CSS editor with nested selectors
Masks, motion paths, shapes, etc.
Shape editor, text wrap & clip paths
Advanced color and background editor

css

Support for modern CSS properties - FlexBox, CSS Shapes, MotionPath, ClipPath, etc. Supports calc and variables. Target deeply nested or dynamic elements using advanced CSS selectors. Generate repeating styles. Animate properties with custom state transitions or expressions.

Create canvas layers and special effects
Add special effects using nodes
Video content in shapes
Multiple textures, blend modes, adjustments

canvas

Rendering to canvas elements, effects and filter nodes, image/color manipulation nodes, composite nodes, sprite sheets, image sequences etc. Includes many primitive shapes and Path2D support for custom shapes. Blend modes, clips, masks and more.

Flexible mediaqueries & breakpoints
Customize query parameters
Screen, print, feature queries and more
Load from presets

MediaQueries

Unlimited MediaQueries and breakpoints for devices. Create adaptive layouts and interactions for specific media. Create custom breakpoints to make your designs responsive.

WebAudio nodes, custom video and image filter nodes

media

Create custom audio/video players and interactive visualizers using WebAudio. Add your own script nodes when you require custom audio/video processing

CSS Transitions and Animations

States

Add custom states or pseudo states to any element. Transition or add keyframes to properties within states. Create unique animations using custom easing functions or bezier curves. Trigger state changes from events.

Flexible custom event handlers

Events

Powerful event handling features for advanced user interactions. Multi-touch gestures, custom events and audio/video events, without writing any code. Create sophisticated interactive experiences.

Variable scroll motion and events

Scrolling

Add unique scroll motion and effects. Advanced controls for ratios, offsets, limits, etc. Trigger events, or use timelines for even more control.

Programmable nodes

Nodes

Programmable node based expressions and filters allows creating complex SVG filter nodes, WebAudio nodes and video/image effects.

DOM, attribute & data modifiers

Modifiers

Use modifiers to generate elements from array sources or numeric sequences, animate properties or display dynamic content.

Expression editor with modifier nodes

Expressions

Create high performance animations by adding simple javascript expressions to properties.

Define functions with default arguments

Functions

Use the available Math functions & presets with customizable parameters for advanced animation and special effects. Add your own modifier functions for total control.

Realtime inspector and expression debuger

Debug

The real-time expression visualizer plots values during runtime. Debug and/or visualize expressions and iterators during animations.

Real Data

Data objects consume dynamic data from various sources including REST APIs, JSON, WebSockets, CSV, arrays, strings, numbers, files, AudioBuffer, etc. Create persist-able objects, save them to localStorage or a remote database with or without user authentication, all without writing any code.

Write server functions for handling custom requirements such as data transformations or saving to external services.

Remote Data
Local Collection
Audiobuffer
CSV Data

Coming Soon

Infinite Studio will be available for download in summer of 2017.

Unlimited projects with unlimited exports

Optional backends and free/paid cloud hosting

Pre-order to get the following exclusive benefits:

JAN. 2017

Access to private beta starting Jan. 2017.

Get access way before everybody else.

MARKETPLACE

One year exclusive developer access to the marketplace.

Create and sell plugins, custom elements, custom script nodes, designs, presets, etc.

PRIORITY

Priority access to new versions and features as they are ready for beta testing.

You get to use new features before everybody else.

Lifetime discount

Lifetime discount of $50

A $50 discount on every major upgrade

$149.00

pre-order price: $99.00

Don't want to pre-order?

Modern
Web Tools
  • html
  • svg
  • css
  • canvas
  • mediaqueries
Interaction
Design
  • media
  • states
  • events
  • scroll
Visual
Coding
  • nodes
  • modifiers
  • expressions
  • functions
  • inspect