diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 497251e5aa..7e7c6564ab 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -67,6 +67,8 @@ module.exports = React.createClass({
             collapse_rhs: false,
             ready: false,
             width: 10000,
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
         };
         if (s.logged_in) {
             if (MatrixClientPeg.get().getRooms().length) {
@@ -369,7 +371,7 @@ module.exports = React.createClass({
                     onFinished: function(should_leave) {
                         if (should_leave) {
                             var d = MatrixClientPeg.get().leave(roomId);
-                            
+
                             // FIXME: controller shouldn't be loading a view :(
                             var Loader = sdk.getComponent("elements.Spinner");
                             var modal = Modal.createDialog(Loader);
@@ -534,6 +536,12 @@ module.exports = React.createClass({
                     collapse_rhs: false,
                 });
                 break;
+            case 'ui_opacity':
+                this.setState({
+                    sideOpacity: payload.sideOpacity,
+                    middleOpacity: payload.middleOpacity,
+                });
+                break;
         }
     },
 
@@ -887,7 +895,7 @@ module.exports = React.createClass({
         dis.dispatch({
             action: 'view_user',
             member: member,
-        });        
+        });
     },
 
     onLogoutClick: function(event) {
@@ -1034,7 +1042,7 @@ module.exports = React.createClass({
         var NewVersionBar = sdk.getComponent('globals.NewVersionBar');
         var ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
 
-        // work out the HS URL prompts we should show for 
+        // work out the HS URL prompts we should show for
 
         // needs to be before normal PageTypes as you are logged in technically
         if (this.state.screen == 'post_registration') {
@@ -1060,21 +1068,22 @@ module.exports = React.createClass({
                             highlightedEventId={this.state.highlightedEventId}
                             eventPixelOffset={this.state.initialEventPixelOffset}
                             key={this.state.currentRoom}
+                            opacity={this.state.middleOpacity}
                             ConferenceHandler={this.props.ConferenceHandler} />
                     );
-                    right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} />
+                    right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity} />
                     break;
                 case this.PageTypes.UserSettings:
                     page_element = <UserSettings onClose={this.onUserSettingsClose} version={this.state.version} />
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.CreateRoom:
                     page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
                     break;
                 case this.PageTypes.RoomDirectory:
                     page_element = <RoomDirectory />
-                    right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
+                    right_panel = <RightPanel collapsed={this.state.collapse_rhs} opacity={this.state.sideOpacity}/>
                     break;
             }
 
@@ -1098,7 +1107,7 @@ module.exports = React.createClass({
                 <div className="mx_MatrixChat_wrapper">
                     {topBar}
                     <div className={bodyClasses}>
-                        <LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} />
+                        <LeftPanel selectedRoom={this.state.currentRoom} collapsed={this.state.collapse_lhs} opacity={this.state.sideOpacity}/>
                         <main className="mx_MatrixChat_middlePanel">
                             {page_element}
                         </main>
diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 8f5ffd9e56..8292c0dee1 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -65,6 +65,9 @@ module.exports = React.createClass({
 
         // callback which is called when more content is needed.
         onFillRequest: React.PropTypes.func,
+
+        // opacity for dynamic UI fading effects
+        opacity: React.PropTypes.number,
     },
 
     componentWillMount: function() {
@@ -423,12 +426,15 @@ module.exports = React.createClass({
             bottomSpinner = <li key="_bottomSpinner"><Spinner /></li>;
         }
 
+        var style = this.props.hidden ? { display: 'none' } : {};
+        style.opacity = this.props.opacity;
+
         return (
-            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel"
+            <ScrollPanel ref="scrollPanel" className="mx_RoomView_messagePanel mx_fadable"
                     onScroll={ this.props.onScroll } 
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }
-                    style={ this.props.hidden ? { display: 'none' } : {} }
+                    style={ style }
                     stickyBottom={ this.props.stickyBottom }>
                 {topSpinner}
                 {this._getEventTiles()}
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 3749ee3bc6..14ce2065df 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1167,7 +1167,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomView">
                             <Loader />
                         </div>
-                    );                
+                    );
                 }
                 else {
                     var inviterName = undefined;
@@ -1233,7 +1233,7 @@ module.exports = React.createClass({
                                             inviterName={ inviterName }
                                             canJoin={ true } canPreview={ false }
                                             spinner={this.state.joining}
-                                            room={this.state.room}                                            
+                                            room={this.state.room}
                             />
                         </div>
                         <div className="mx_RoomView_messagePanel"></div>
@@ -1314,7 +1314,7 @@ module.exports = React.createClass({
                                 inviterName={inviterName}
                                 invitedEmail={invitedEmail}
                                 canPreview={this.state.canPeek}
-                                room={this.state.room}                                
+                                room={this.state.room}
                 />
             );
         }
@@ -1339,7 +1339,7 @@ module.exports = React.createClass({
             messageComposer =
                 <MessageComposer
                     room={this.state.room} onResize={this.onChildResize} uploadFile={this.uploadFile}
-                    callState={this.state.callState} tabComplete={this.tabComplete} />
+                    callState={this.state.callState} tabComplete={this.tabComplete} opacity={ this.props.opacity }/>
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format
@@ -1394,8 +1394,12 @@ module.exports = React.createClass({
 
         if (this.state.searchResults) {
             searchResultsPanel = (
-                <ScrollPanel ref="searchResultsPanel" className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
-                        onFillRequest={ this.onSearchResultsFillRequest } onResize={ this.onSearchResultsResize }>
+                <ScrollPanel ref="searchResultsPanel"
+                    className="mx_RoomView_messagePanel mx_RoomView_searchResultsPanel"
+                    onFillRequest={ this.onSearchResultsFillRequest }
+                    onResize={ this.onSearchResultsResize }
+                    style={{ opacity: this.props.opacity }}
+                >
                     <li className={scrollheader_classes}></li>
                     {this.getSearchResultTiles()}
                 </ScrollPanel>
@@ -1412,6 +1416,7 @@ module.exports = React.createClass({
                 eventPixelOffset={this.props.eventPixelOffset}
                 onScroll={ this.onMessageListScroll }
                 onReadMarkerUpdated={ this._updateTopUnreadMessagesBar }
+                opacity={ this.props.opacity }
             />);
 
         var topUnreadMessagesBar = null;
@@ -1446,7 +1451,7 @@ module.exports = React.createClass({
                 { topUnreadMessagesBar }
                 { messagePanel }
                 { searchResultsPanel }
-                <div className="mx_RoomView_statusArea">
+                <div className="mx_RoomView_statusArea mx_fadable" style={{ opacity: this.props.opacity }}>
                     <div className="mx_RoomView_statusAreaBox">
                         <div className="mx_RoomView_statusAreaBox_line"></div>
                         { statusBar }
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 640ad66d72..3afa0fb77c 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -76,6 +76,9 @@ var TimelinePanel = React.createClass({
 
         // callback which is called when the read-up-to mark is updated.
         onReadMarkerUpdated: React.PropTypes.func,
+
+        // opacity for dynamic UI fading effects
+        opacity: React.PropTypes.number,
     },
 
     statics: {
@@ -861,6 +864,7 @@ var TimelinePanel = React.createClass({
                     stickyBottom={ stickyBottom }
                     onScroll={ this.onMessageListScroll }
                     onFillRequest={ this.onMessageListFillRequest }
+                    opacity={ this.props.opacity }
             />
         );
     },
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 6d26e7884d..8a0a91fae9 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -40,6 +40,9 @@ module.exports = React.createClass({
 
         // callback when a file to upload is chosen
         uploadFile: React.PropTypes.func.isRequired,
+
+        // opacity for dynamic UI fading effects
+        opacity: React.PropTypes.number,
     },
 
     onUploadClick: function(ev) {
@@ -182,7 +185,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_MessageComposer">
+            <div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         {controls}
diff --git a/src/components/views/rooms/RoomSettings.js b/src/components/views/rooms/RoomSettings.js
index 2b5a6c7172..fd8bcbfe96 100644
--- a/src/components/views/rooms/RoomSettings.js
+++ b/src/components/views/rooms/RoomSettings.js
@@ -20,6 +20,7 @@ var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
 var Modal = require('../../../Modal');
 var ObjectUtils = require("../../../ObjectUtils");
+var dis = require("../../../dispatcher");
 
 module.exports = React.createClass({
     displayName: 'RoomSettings',
@@ -69,6 +70,20 @@ module.exports = React.createClass({
         }, (err) => {
             console.error("Failed to get room visibility: " + err);
         });
+
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 0.3,
+            middleOpacity: 0.3,
+        });
+    },
+
+    componentWillUnmount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
+        });
     },
 
     setName: function(name) {